(五)使用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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容