Vue筆記(十五) 嵌套路由

嵌套路由

子路由組件
News.vue
Message.vue

配置嵌套路由: router.js

path: '/home',
  component: home,
  children: [{
    path: 'news',
    component: News
  }, {
    path: 'message',
    component: Message
  }]

路由鏈接: Home.vue

<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<router-view></route-view>

向路由組件傳遞數據

方式 1: 路由路徑攜帶參數(param/query)

1) 配置路由
children: [
{ path: 'mdetail/:id',
  component: MessageDetail
}
]

2) 路由路徑
<router-link :to="'/home/message/mdetail/'+m.id">
{{m.title}}</router-link>

3) 路由組件中讀取請求參數
this.$route.params.id

方式 2:

<router-view>屬性攜帶數據 <router-view :msg="msg"></router-view>

緩存路由組件對象

1) 默認情況下, 被切換的路由組件對象會死亡釋放, 再次回來時是重新創建的
2) 如果可以緩存路由組件對象, 可以提高用戶體驗

編碼實現
<keep-alive>
    <router-view></router-view>
</keep-alive>

 

編程式路由導航

1) this.$router.push(path): 相當於點擊路由鏈接(可以返回到當前路由界面)
2) this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由界面)
3) this.$router.back(): 請求(返回)上一個記錄路由
4) this.$router.go(-1): 請求(返回)上一個記錄路由
5) this.$router.go(1): 請求下一個記錄路由