Vue路由导航传参

目前了解到的导航传参有三种方法，以下是三种方法的写法与优缺点

1.query传参

使用query传参相当于get请求，传递的时候把参数拼接到路径里，优点是刷新的时候数据存在，下面是具体写法：

<-- 以对象的形式将数据通过路由传递给组件 -->
点击
    

<-- 在组件里通过$route.query接收参数 -->

    let acom = {
        template: "#a"
    }
    let router=new VueRouter({
        routes:[{
            name:"fa",
            path:"/fa",
            component:acom
        }]
    })
    new Vue({
        el: "#app",
        router
    })

2.params传参

通过params传参时，当页面运行后，能访问到数据，但是当页面刷新时，会重新加载组件，数据会消失，下面是html代码与js代码：

<-- 与query相似，以对象形式传递，注意：这里用的是name -->
    点击
    

<-- 通过$route.params接收传递的数据 -->

    let acom = {
        template: "#a"
    }
    let router=new VueRouter({
        routes:[{
            name:"fa",
            path:"/fa",
            component:acom
        }]
    })
    new Vue({
        el: "#app",
        router
    })

 

3.第三种是通过"/:"，结合了以上两种方式的优点，既能做到刷新页面不使数据丢失，又能不在路径里暴露过多的数据：

    let acom = {
        template: "#a",
    }
    let router=new VueRouter({
        routes:[{
            name:"fa",
            path:"/fa/:id/:name",
            component:acom,
            props:true
        }]
    })
    new Vue({
        el: "#app",
        data:{

               arr:[{
                   id:1,
                   name:"商品一",
                   path:"/fa/1/商品一"
               },
                   {
                       id:2,
                       name:"商品二",
                       path:"/fa/2/商品二"
                   },
                   {
                       id:3,
                       name:"商品三",
                       path:"/fa/3/商品三"
                   }]
        },
        router
    })