vue-router傳參數的方式

場景

　　我們有兩個頁面，一個叫做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