VUE 路由嵌套子路由傳值

路由是VUE的一大特點，初期開發的時候自己沒理解好導致刷新跳轉到首頁還有路由之間傳值復雜化的問題。現在就分享一下我的部分體會。

一、嵌套路由 

路由嵌套應該是基礎知識，坑點有：

    1.按照寫好的菜單跳轉只push 當前組件而不是按照路由文件順序加載（比如我要加載home.vue 直接push該path 結果不行，在頁面重新引入home.vue 發現可以了，就以為自己寫好了。其實是錯誤的方式，只要寫的路由文件正確就不會出現加載不出來的情況，可以在path上多做嘗試，也可以直接用name跳轉）此處出現的問題是刷新跳轉到首頁，而且組件之間傳值特別復雜。

    2.明明路由文件配置的沒問題應該跳轉的結果每跳，還看不出錯誤。建議檢查router的寫法 

1. export default new Router({
2. routes: [ //配置路由，這里是個數組 檢查這里不能寫成router
3.     { //每一個鏈接都是一個對象
4.          path: '/', //鏈接路徑
5.          name: 'Hello', //路由名稱，
6.          component: Hello //對應的組件模板 檢查這里不能寫成components

 

     }，

 

二、 路由傳值

    1、params傳值方式，name+params傳值 。路徑變量傳值 router文件中path后加:id或者加/id  this.$router.push({ path: "/login", params: { id: this.id} });

    2、path+id   router文件中path后加:id或者加/id    this.$router.push({ path: "/login?id=" + this.id });

前兩種方法 this.$route.params.id 接收參數

    3、query傳值。this.$router.push({ path: "/login", query: { id: this.id } });  this.$route.query.id 獲取參數

    4、this.$router.push({ path: "/login/" + this.id });或者 this.$router.push({ name: "login", params: { id : this.id } });  路徑中沒有傳值顯示，但刷新數據不能恢復（1、2則能恢復傳遞的數據）