vue路由传参几种方法

vue路由传参几种方法

<router-link :to="{path:'/home',query: {name: 123}}">跳转</router-link>
//页面url  /home?name=123
//接收值   this.$route.query.name  

<router-link :to="{path:'/home/:123',}">跳转</router-link>
//页面url  /home/123

<router-link :to="{path:'/home',push: {name: id}}">跳转</router-link>
//接收值 this.$route.params.name  （在页面刷新会消失）


this.$router.push("home");

this.$router.push({ name: 'home', params: { Id: 123 }})
//push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，

this.$router.push(`/home'/${id}`);
//this.$route.params.id 来获取参数
复制代码

router文件中

  {
      path: '/home/:id',
      name: 'home',
      component: resolve => require(['@/components/pages/home'], resolve), // 使用懒加载
    },
复制代码

query 和params的区别

• query会出现在url上，params不会出现在url上

• 刷新页面params会小时，query不会消失

转载于:https://juejin.im/post/5c7781b4f265da2da67c41e1