路由跳转

在进行路由跳转时，可现在router文件夹底下新建一个js文件，起名为permission.js。在此文件夹中引入router，然后在permission.js文件中进行路由跳转的一系列操作。路由跳转之前的函数为：router.beforeEach()；路由跳转之后的函数为：router.afterEach()；具体操作在以下代码中做一介绍。

beforeEach函数中是一个箭头函数，箭头函数中有三个参数，具体操作如以下代码：

import router from "./index.js";
//路由跳转之前
router.beforeEach((to,from,next)=>{
    //to 目标组件 表示将要跳转到的组件
    //from  原组件
    //next 是一个函数
    // next()  进入下一个组件的钩子函数
    // next(false); //阻止跳转，中断导航
    //next("/login")  进入指定的组件的钩子函数

});
//路由跳转之后
// router.afterEach();
export default router;

以下以一个登录操作为例，例子中展示的是当用户登录了账号之后就会跳转到主界面，当没有登录的时候，就会跳转到登录界面，只有当登录之后才会进入到主界面。
首先在组件文件夹（components）中新创建两个vue文件，一个起名为home.vue，一个起名为login.vue。
home.vue文件：

login.vue文件：

当创建好这两个组件之后，就需要在index.js中注册这两个组件，代码如下：

import Home from "@/components/home"
import Login from "@/components/login"
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta:{
        /*一开始就给赋值为true，当isLogin为true时，就意味着home界面必须登录后方可查看，当
          这块设置为false时，就意味不用登录即可进入home界面（这块需要和permission.js文件中
          的函数中的判断进行统一，这块设置的值是为了在permission.js文件中使用）。
        */
        isLogin:true
      }
    },{
        path:'/login',
        name:'login',
        component:Login
    }
  ]
})

permission.js文件：

import router from "./index.js";
router.beforeEach((to,from,next)=>{
    if (to.matched.some(res=>res.meta.isLogin)) {
        if (sessionStorage['username']) {
            next()
        }else{
            next({
                path:'./login',
                query:{
                    redirect:to.fullPath
                }
            })
        }
    }else{
        next()
    }
})
export default router;

当创建这个文件之后，就不能再引用他之前的那个文件了，就需要对main.js中引用的router做一变化，代码如下，：

import router from "./router/perssion.js"