vue路由傳參並跳轉頁面

在vue項目中參數的傳遞可以使用本地緩存或者Vuex，那么vue能不能像小程序一樣路由傳參呢，顯然是可以的而且非常簡單

方式一：query傳參

    //傳參
    go(){
        that.$router.push({
            path:'/order',//跳轉路徑
            name: 'Order',//跳轉路徑的name值，不寫跳轉后頁面取不到參數
            // 參數
            query: { 
                name: 'name', 
                dataObj: {}
            }
        })
    }, 

//跳轉后頁面取參
        mounted(){
            // 路由參數
            let mm = this.$route.query//query包含傳遞的所有參數
        },

But 瀏覽器地址欄中顯示如下，所以如果參數保密，該方式慎用啦

 

方式二：parms傳參

        //傳參
        go(){
            this.$router.push({
                path:'/order',//跳轉路徑
                name: 'Order',//跳轉路徑的name值，不寫跳轉后頁面取不到參數
                // 參數
                params: { 
                    name: 'name', 
                    dataObj: {}
                }
            })
        },


//跳轉后頁面取參
        mounted(){
            // 路由參數
            let mm = this.$route.params//parms包含傳遞的所有參數
        },

是的就是這么相似，但是傳遞的參數就不會顯示在地址欄了，但是有沒有注意到跳轉路徑的name值必傳是不是也不夠優雅，不傳行不行？見方式三

 

方式三：不傳name

不傳name需要對路由配置文件的路徑做些改動

       //傳參
       go(){
            let num = '33'
            this.$router.push({
                path:'/order' + '/' + num,
            })
        },

       //路由配置文件
       {
            path: '/order/:id',//路由攜帶的參數
            // path: '/order',
            name: 'Order',
            component: Order
        },

        //跳轉后頁面取參
        mounted(){
            // 路由參數
            let mm = this.$route.params//parms包含傳遞的所有參數
        },