Vue二、vue-router路由的各个部分的使用
vue-router官方文档
官方给的文档很详细，我从在我搭的框架实际应用上讲述一下vue-router如何在项目中封装并引用。
1、概念简介
引用官方的一句话
使用Vue + Vue Router创建单页应用程序非常简单。借助Vue.js，我们已经在使用组件组成应用程序。将Vue Router添加到混合中时，我们要做的只是将组件映射到路由，并让Vue Router知道在何处渲染它们
个人理解
通常的html网页，跳转到另一个页面都需要在浏览器中刷新一下，等待服务器响应将页面传回来，如果有延迟，会有一段时间的空白，对用户体验效果不佳，于是，单页面应用应运而生，因为在一开始就加载出所有页面的内容，所以首页加载的速度会很慢。vue的强大之处就在于vue-router的应用以及后续的一些内容。
（1）vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；vue-router就是路由，用于页面跳转。
（2）组件之间的嵌套，就像后台管理系统一样，左边栏和顶部栏保持不变，只变换中间像变换的部分（利用children实现，官方叫命名路线），也可以实现由多个组件的组成的页面的跳转（官方叫命名视图）。
（3）只要在main.js和App.vue以及路由文件中配置好，可以：后缀.vue中使用<router-link :to="...">后缀.js文件中使用router.push(...)实现页面或者组件之间的跳转。官方文档给的很详细，包括历史记录等等。
（4）树状结构！！！这个是单页面应用的核心概念 ，有了树状结构，我们就不需要把路由全部都注册在整体的根节点上，每一个节点都是下一个节点的根节点。
components.png
（5）vue-router可以实现页面间传参、路由重定向、起别名等其他功能；
2、那么又有一个问题来了，如果如果我想用户没有登陆的时候，让他不能跳转到首页，而是跳到登陆注册的页面呢？
这就需要用到一个叫做导航守卫的东西，它的原理很简单，就是通过重定向或取消导航来保护导航。
官网给出了
（1）、router.beforeEach
（2）、router.afterEach
（3）、在定义的组件的路由里beforeEnter
（4）、在定义的组件中beforeRouteEnter、beforeRouteUpdate、 beforeRouteLeave
这里做一个关于登陆注册的例子，结合localStorage，检测路由
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
if (to.path === '/login' || to.path === '/forgetPsd' || to.path === '/register') {
next();
} else {
let token = localStorage.getItem('token');
// 检测本地localStorage是否存在token
if (!token) {
next('/login');
} else {
next();
}
}
});
这里每个保护函数都接收三个参数：
-
to: Route：被导航到的目标Route对象 -
from: Route：正在远离的当前路线。 -
next: Function：必须调用此函数才能解决，next中参数详见官方文档，最常用next（），导航将被确认（就是继续下去不拦截了）。
3、小例子
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
redirect: '/index'
},
{
path: '/',
component: resolve => require(['@/components/common/home.vue'], resolve),
meta: { title: '全局文件' },
children: [
{
path: '/index',
component: resolve => require(['@/views/index.vue'], resolve),
meta: {
title: '系统首页'
}
},
{
path: '/TaskList',
component: resolve => require(['@/views/TaskList.vue'], resolve),
meta: {
title: '任务列表'
}
}
]
},
{
path: '/forgetPsd',
component: resolve => require(['@/views/ForgetPsd.vue'], resolve),
meta: {
title: '忘记密码'
}
},
{
path: '/login',
component: resolve => require(['@/views/login.vue'], resolve),
meta: {
title: '登陆'
}
},
{
path: '/register',
component: resolve => require(['@/views/register.vue'], resolve),
meta: {
title: '注册'
}
},
{
path: '*',
component: resolve => require(['@/views/404.vue'], resolve),
meta: {
title: '404'
}
}
]
})
// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
if (to.path === '/login' || to.path === '/forgetPsd' || to.path === '/register') {
next();
} else {
let token = localStorage.getItem('token');
if (token === null || token === '' || token === undefined) {
next('/login');
} else {
next();
}
}
});
export default router;
开头设置mode: 'history'是为了取消vue初始化的项目中路由最前面的#号
path : 自定义的路径
name：路由的名称（这个是用来做菜单选中状态的，所以一定要写）
compoment：用来挂载组件 resolve => require(['@/XX/XXX.vue'], resolve) 是异步加载的写法
@ ： @指的是src目录，后面的是目录中的Vue文件，在指定目录下一定要有鸭
export default router : 将路由器导出,必不可少
