參考地址：https://router.vuejs.org/zh-cn/
- NPM安裝vue-router
npm install vue-router (--save)
- 使用
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入頁面組件
import X from '../X'
import Y from '../Y'
import Z from '../Z'
Vue.use(VueRouter) // 模塊化時(shí)必須
export default new Router({
mode: 'history', // 設(shè)置H5模式，默認(rèn)hash模式
routes: [
{ path: '/x', component: X, name: 'x' }, // 無參
{ path: '/y/:id', // 路徑參數(shù)
component: Y,
name: 'y',
children: [
{ path: 'z', component: Z, name: 'z' }
]
}
]
})
// 根組件App.vue
<!-- 路由匹配到的組件將在這里渲染 -->
<router-view></router-view>
// 組件內(nèi)a標(biāo)簽
<router-link to="/xx">將被渲染成a標(biāo)簽</router-link>
// 入口文件main.js
import router from './router';
const app = new Vue({
router
})
app.$mount('#app')
- .router-link-active
// 當(dāng)<router-link>對(duì)應(yīng)的路由匹配成功時(shí)自動(dòng)設(shè)置class屬性值僵井，默認(rèn)值
// 修改通過路由的構(gòu)造選項(xiàng)linkActiveClass全局配置
export default new Router({
...
linkActiveClass: 'xxx',
...
})
- 編程式導(dǎo)航
// push向history添加新記錄
// 字符串
router.push('home')
// 對(duì)象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)饿这，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
// 替換掉當(dāng)前的history記錄
router.replace(...)
// 在history記錄中前進(jìn)或后退多少步大审，類似于window.history.go(n)
router.go(n)
- 重定向
{ path: '/a', redirect: '/b' }
{ path: '/a', redirect: to => {
// 方法接受目標(biāo)路由作為參數(shù)
return 重定向的路徑
}
}
- 別名
{ path: '/a', component: A, alias: '/b' }
