Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。

方法一

param傳遞引數（get方式）

getDescribe(id) {
    //直接呼叫$router.push 實現攜帶引數的跳轉
    this.$router.push({
    path: `/describe/${id}`,
    //this.$router.push({ name: 'user', params: { userId }}) // -> /user/123
 })
//需要路由中進行如下配置
{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
}
//取出引數
this.$route.params.id
 

1. 使用這種傳參方式，要在路由中進行配置（如"/:id"），params是路由的一部分（位址列中顯示/describe/id的形式），必須要在路由後面新增引數名。params一旦設定在路由，params就是路由的一部分，如果這個路由有params傳參，但是在跳轉的時候沒有傳這個引數，會導致跳轉失敗或者頁面會沒有內容。
2. 使用params傳參只能用name來引入路由，即push裡面只能是name:’xxxx’,不能是path:’/xxx’,因為params只能用name來引入路由，如果這裡寫成了path，接收引數頁面會是undefined（由於動態路由也是傳遞params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否則params將無效
   ）
3. 如果路由中不進行/:id的配置，頁面的第一次跳轉正常，位址列中沒有引數，但是一重新整理頁面就不會接受到引數
4. 如果引數不是必傳的引數，可進行如下配置

//需要路由中進行如下配置
{
     path: '/describe/:id?',
     name: 'Describe',
     component: Describe
}

如果 props 被設定為 true，route.params 將會被設定為元件屬性。請看如下程式碼

//?問號的意思是該引數不是必傳項
//多個引數用/:id連線
//path: '/Driver/CarManager/CarSetting/:car_id/:page_type',
{
    path: 'test/:name?',
    name: 'test',
    component: 'test.vue',
    props: true,
},
props:{name:{required:false,default:''}} （頁面重新整理不消失，可以在路由配置中設定引數）
 

方法二

使用query進行傳遞（post方式）

//傳參時
this.$router.push({
    path: '/describe',
    query: {
        id: id
    }
})
//路由中的配置(和不傳參的一樣哈)
   {
path: '/describe',
    name: 'Describe',
    component: Describe
}
//取出引數時
this.$route.query.id

1. query傳遞引數的方式，引數顯示在位址列中（如位址列顯示"/describe?id=88"），類似get方式，通過URL傳參
2. query傳遞引數用path和那麼的方式都可以，引數可以不傳