場景

　　我們有兩個頁面，一個叫做Home，一個叫做About。想要實現從Home點選按鈕之後跳轉到About頁面，並且傳遞給About頁面一個id。

　　Home中的點選按鈕如下：

<button @click="toAbout(id)">點選我跳轉去About頁面</button>

一、方式一

　　呼叫this.$router.push實現攜帶引數的跳轉

export default {
  name: 'Home',
  data(){
    return{
      id:123,
    }
  },
  methods:{
    toAbout(id){
      
 
this.$router.push({
        path:`/About/${id}`
      })
    }
  }
}

　　在路由的配置中，About頁面需要做如下配置：

{
  path: '/about/:id',
  name: 'About',
  component: About
}

　　在About頁面，通過如下程式碼獲取傳遞的引數：

this.$route.params

二、方式二

　　通過一個名稱來標識一個路由顯得更方便一些，特別是在連結一個路由，或者是執行一些跳轉的時候。通過路由屬性中的name來確定跳轉的路由，使用params來傳遞引數。

toAbout(id) {
    
 
this.$router.push({
        name: "About",
        params: {id: id}
    })
}

　　About頁面的路由配置如下：

{
  path: '/about/:id',
  name: 'About',
  component: About
}

　　在About頁面，通過如下程式碼獲取傳遞的引數：

this.$route.params

三、方式三

　　可以由path或者name進行跳轉，並且通過query來進行引數傳遞。

　　這種情況下，傳遞的引數會顯示在url後通過?id=xxx來顯示。

toAbout(id) {
    this.$router.push({
        name: "About",
 

        // path: "/about",
        query: {id: id}
    })
}

　　About頁面的路由配置如下：

{
  path: '/about',
  name: 'About',
  component: About
}

　　在About頁面，通過如下程式碼獲取傳遞的引數：

this.$route.query