vue用來實現SPA的插件
使用vue-router
1. 創建路由器: router/index.js
new VueRouter({
routes: [
{ // 一般路由
path: '/about',
component: about
},
{ // 自動跳轉路由
path: '/',
redirect: '/about'
}
]
})
2. 注冊路由器: main.js
import router from './router'
new Vue({
router
})
3. 使用路由組件標簽:
<router-link to="/xxx">Go to XXX</router-link>
<router-view></router-view>
編寫路由的3步
1. 定義路由組件
2. 映射路由
3. 編寫路由2個標簽
嵌套路由
children: [
{
path: '/home/news',
component: news
},
{
path: 'message',
component: message
}
]
向路由組件傳遞數據
params: <router-link to="/home/news/abc/123">
props: <router-view msg='abc'>
緩存路由組件
<keep-alive>
<router-view></router-view>
</keep-alive>
路由的編程式導航
this.$router.push(path): 相當於點擊路由鏈接(可以返回到當前路由界面)
this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由界面)
this.$router.back(): 請求(返回)上一個記錄路由