vue 传递方式

在做路由跳转时，比如一个商品列表页，我想通过不同过商品ID请求不同的商品详情页，这时候我们就需要传递参数来判断

方法一 param

export default [
{
   path: '/app/:id', // app/xxx传递一个参数
   component: Todo,
   name: 'app', // 路由的命名
}
]


 <router-link to="/app/123">app</router-link>


mounted () {
   // 获取整个route对象
   console.log(this.$route)
}

方法二 query

在url上添加?a=111&b=222参数，在获取this.$route的时候就可以获取到query的值

方法三 props(推荐使用，高度解耦)

export default [
{
    path: '/app/:id', // app/xxx传递一个参数
    component: Todo,
    name: 'app', // 路由的命名
    props: true, // 让id作为props的值进行传递
    // props: { // props也可以是一个对象
   //   id: 456,
   //  name: '222'
   //  },
   // props:(route) =>({id:route.query.b}), // props 也可以是一个函数
}
]

props: ['id'],
mounted: function () {
   console.log(this.id)
}