vue-router传递参数3种方法

vue-router传递参数3种方法

第一种：get方法

传递值

<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>

接收值

this.$route.query.name

第二种：post方法

传递值

<router-link :to="{path:'/test',push: {name: id}}">跳转</router-link>

接收值

this.$route.params.name  （在页面刷新的时候就会消失）

第三种：路由方法

传递值

//?问号的意思是该参数不是必传项
//多个参数用/:id连接
//path: '/Driver/CarManager/CarSetting/:car_id/:page_type',
{
    path: 'test/:name?',
    name: 'test',
    component: 'test.vue',
    props: true,
},

接收值

props:{name:{required:false,default:''}} （页面刷新不消失，可以在路由配置中设置参数）

-----------------------------------分割线--------------------------------------------

另外： 如果在链接上设置 replace 属性，当点击时，会调用 router.replace() 而不是 router.push()，于是浏览器不会留下 history 记录。

  <router-link :to="{ path: '/abc'}" replace></router-link>