一、安装
方法1、下载、引用:
<script src="/path/to/vue-router.js"></script>
方法2、安装、在根路由文件router/index引用,并use::
npm install vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
方法3、Vue CLI
方法4: 构建开发版
二、使用
1. router根文件
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/login'
import Error from '@/views/error'
import todoRouter from './todo'
Vue.use(Router)
// 定义登录 404 页面路由
let routers = [{
path: '/login',
name: 'login',
component: Login
},
{
path: '*',
redirect: '/error/404'
},
{
path: '/error/:errorCode',
name: 'error',
component: Error
}
]
// 添加测试路由
routers.push(todoRouter )
//路由导出
export default new Router({
scrollBehavior: () => ({ //设置滚轴位置,路由使用了keep-alive,则默认会保存当前路由组件的滚轴位置;y:0每次进入路由都初始化滚轴位置
y: 0
}),
routes: routers
})
2. views/ router-view
test.vue路由文件
//渲染路径匹配到的视图组件test.vue
<template>
<div class="test">
<router-view></router-view>
</div>
</template>
3. router路由子文件
当项目下有多组件,可以按照划分的模块,分别定义路由文件,再将各个路由文件根据模块划分的规则统一导入。
//某一功能模块的路由子文件一
import Layout from '@/views/test'
import i18n from '@/lang/i18n'
let Router = {
path: '/todo',
name: 'todo',
component: Layout,
redirect: '/todo/todoList',
children: [{
path: 'todoList',
name: 'todoList',
component: () => import(/* webpackChunkName: 'todo' */'@/views/todo/todo_list.vue'), //路由懒加载,
meta: { //路由元信息,Router配置中的每个路由对象为路由记录、路由记录可嵌套。可遍历 $route.matched 来检查路由记录中的meta字段。
product: 'todo'
}
},
{
path: 'createTodo',
name: 'createTodo',
component: () => import(/* webpackChunkName: 'todo' */'@/views/todo/createTodo'),
props: {
name: i18n.t('todo.createTodo')
},
meta: {
asideHide: true,
product: 'todo'
}
}]
}
export default Router
//某一功能模块的路由子文件二
import Layout from '@/views/ts'
let Router = {
path: 'ts',
name: 'ts',
component: Layout,
redirect: 'ts/tsList',
children: [
{
path: 'tsList',
name: 'tsList',
component: () => import(/* webpackChunkName: 'todo' */'@/views/ts/ts_list.vue'),
meta: {
product: 'todo'
}
}, {
path: 'tsDetail/:id',
name: 'tsDetail',
component: () => import(/* webpackChunkName: 'todo' */'@/views/ts/ts_detail.vue'),
meta: {
product: 'todo',
dependOn: 'tsList'
}
}]
}
export default Router
//路由嵌套
import todoRouter from './todo'
import tsRouter from './ts'
/* 把vpc下面的所有路由放入vpc模块下面进行了嵌套 */
todoRouter.children.push(tsRouter, xxxRouter, ...)
export default todoRouter