参考地址：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) // 模块化时必须
export default new Router({
mode: 'history', // 设置H5模式，默认hash模式
routes: [
{ path: '/x', component: X, name: 'x' }, // 无参
{ path: '/y/:id', // 路径参数
component: Y,
name: 'y',
children: [
{ path: 'z', component: Z, name: 'z' }
]
}
]
})
// 根组件App.vue
<!-- 路由匹配到的组件将在这里渲染 -->
<router-view></router-view>
// 组件内a标签
<router-link to="/xx">将被渲染成a标签</router-link>
// 入口文件main.js
import router from './router';
const app = new Vue({
router
})
app.$mount('#app')
- .router-link-active
// 当<router-link>对应的路由匹配成功时自动设置class属性值，默认值
// 修改通过路由的构造选项linkActiveClass全局配置
export default new Router({
...
linkActiveClass: 'xxx',
...
})
- 编程式导航
// push向history添加新记录
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
// 替换掉当前的history记录
router.replace(...)
// 在history记录中前进或后退多少步，类似于window.history.go(n)
router.go(n)
- 重定向
{ path: '/a', redirect: '/b' }
{ path: '/a', redirect: to => {
// 方法接受目标路由作为参数
return 重定向的路径
}
}
- 别名
{ path: '/a', component: A, alias: '/b' }
