(五)使用vue-router(下)

vue-router 钩子函数(路由拦截)

可以用来修改title或者用来登录判断

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Person from '@/components/Person'
import Main from '@/components/Main'

// 引入vux
import vux from "./vux.js"

Vue.use(Router)

var router = new Router({
    routes: [
        {
            path: '/',
            name: 'Main',
            meta:{
                title:"Main"
            },
            component: Main
        },
        {
            path: '/helloWorld',
            name: 'HelloWorld',
            meta:{
                title:"HelloWorld"
            },
            component: HelloWorld
        },
        {
            path: '/person',
            name: 'Person',
            meta:{
                title:"person"
            },
            component: Person
        },
        ...vux
    ]
})
router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
})


export default  router;


router.beforeEach((to, from, next) => {
    var userInfo = window.localStorage.getItem('token');//获取浏览器缓存的用户信息
    if(userInfo){ //如果有就直接到首页咯
        next();
    } else {
        if(to.path=='/login' || to.path=="/bar2"){ //如果是登录页面路径,就直接next()
            next();
        } else { //不然就跳转到登录;
            next('/login');
        }
    }
})

https://www.jianshu.com/p/96cfc1b9ff21

你可能感兴趣的:((五)使用vue-router(下))