标签：__ beforeEach import 前置 next 跳转 router 路由

 

介绍：

保护路由安全，主要使用于登录注册；只要没有登录就不可以看个人中心

示例：

把路由改为以下格式:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import aboutone from './views/Aboutone';
import abouttow from './views/Abouttow';
import aboutoneson from './views/Aboutoneson';

Vue.use(Router);

const router = Router({
    routes: [{
            // 页面开始就显示的路由
            path: "/",
            name: "home",
            component: Home,

        },
        {
            path: "/about",
            name: "about",
            component: () =>
                import("./views/About.vue"),
            children: [{
                    path: 'aboutone',
                    component: aboutone,
                    children:[
                        {
                        path: 'aboutoneson', 
                        component: aboutoneson,
                        }
                    ]
                },
                {
                    path: 'abouttow',
                    component: abouttow,
                },
            ]
        }
    ]
});
//在每一次；写成箭头函数的写法时这时发现页面跳转不了了
router.beforeEach(()=>{
　　console.log('!!!');
})
//暴露router变量
export default router

beforeEach:指定一次路由每次切换时所调的函数

在每一次路由跳转之前进行调用，初始化时调用一次

 

beforeEach的三个参数：

第一个参数是：即将跳转的路由

第二个参数是：当前导航要离开的路由

第三个参数是：可以通行的路由

//beforeEach有三个参数 to,from,next
router.beforeEach((to,from,next)=>{
　　console.log('!!!');
})

成功跳转

router.beforeEach((to,from,next)=>{
    console.log(to,from);
    //判断如果要进入路由名字为'xiaoxi'或名字为'abtow'，
    if (to.name==='xiaoxi' || to.name === 'abtow') {
        // 如果本地存储的Nuber值为yang就跳转，反之弹出权限不够
        if (localStorage.getItem('Nuber') === 'yang') {
            next()
        } else{
            alert('权限不够')
        }
    } else{
        next()
    } 
})

 

 

 失败跳转

我把获取的值的名字故意改成了yeng

router.beforeEach((to,from,next)=>{
    console.log(to,from);
    //判断如果要进入路由名字为'xiaoxi'或名字为'abtow'，
    if (to.name==='xiaoxi' || to.name === 'abtow') {
        // 如果本地存储的Nuber值为yang就跳转，反之弹出权限不够
        if (localStorage.getItem('Nuber') === 'yeng') {
            next()
        } else{
            alert('权限不够')
        }
    } else{
        next()
    } 
})

 

标签：__,beforeEach,import,前置,next,跳转,router,路由
From： https://www.cnblogs.com/0722tian/p/17156358.html