Vue路由vue-router 路由嵌套，路由传值，路由解耦 --------- 系列二

路由传值

        //4 详情页 动态传值, query传值 ，路由解耦
        {
            // path:"/detail/:id/:name",// 5 动态传值的方式
            //component:Detail,
            //5.1动态路由传值,在定义路由的时候,通过/:的方式来定义传递数据的属性.
            //5.2在路由跳转的时候,通过传值的方式将传递的值通过地址传递给另一个页面 从soom 正在热映页面跳转到detail页面
            //5.3在需要接受参数的页面通过this.$route.params的方式进行接受  在detail页面进行接受
            
            // path:"/detail",//6  query传值的方式
            //component:Detail,
            //6.1 在路由跳转的时候通过?key=value&key=value的方式，将需要传递的参数拼接在跳转路由的路径上  因为要从soom 页面跳转到detail中所以在soom中拼接url地址
            //！！！注意小坑  path中的路径必须带上/  正确的是path:"/detail" 而不是 path:"detail"
            //6.2在需要接受参数的页面上通过this.$route.query进行接收    在detail中接受

            path:"/detail/:id/:name",//7 路由解耦 
            component:Detail,
            props:true,
            //路由解耦其实也是动态路由， path和动态路由一样，
            //7.1在定义路由的额时候给当前路由的配置项添加一个props:true的选项  在router/index.js的配置象中配置
            //7.2通过/：的方式来定义传递数据的属性  在room中定义传递数据的属性
            //7.3在路由跳转的时候通过传值的方式，将传递的值通过地址传给另一个页面  在soom中拼接
            //7.4在需要接受参数的页面进行props接受即可  在detail页面中接受  使用props属性 比如props:["id","name"]


            //8 优化
            //8.1添加一个name属性，可避免路由跳转中的地址字符串拼接  name中是路由名称
            name:"detail"

            
        }

先将概念放上…