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"

            
        }

先將概念放上…