(Node+Express+Vue)路由

最新推荐文章于 2024-07-12 15:14:43 发布

清风自来&静等花开

最新推荐文章于 2024-07-12 15:14:43 发布

阅读量123

点赞数 2

文章标签： vue.js express javascript node.js

本文链接：https://blog.csdn.net/qq_32403063/article/details/137007563

版权

本文介绍了如何在Vue项目中设置路由配置，包括基本路径、重定向、子路由和使用beforeEach导航守卫来处理登录状态。同时提及了localStorage用于存储登录信息的示例。

摘要由CSDN通过智能技术生成

最近在用node整项目
下面是路由配置demo
创建router.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/',
            component: resolve => require(['../common/Home.vue'], resolve),
            meta: { title: '首页' },
            children:[
                {
                    path: '/dashboard',
                    component: resolve => require(['../page/dashboard.vue'], resolve),
                    meta: { title: '面板' }
                },
                {
                    path: '/user',
                    component: resolve => require(['../page/role.vue'], resolve),
                    meta: { title: '角色管理' }
                }
            ]
        },
        {
            path: '/login',
            component: resolve => require(['../login/login.vue'], resolve)
        },
        {
            path: '*',
            redirect: '/404'
        }
    ]
})

export default router;

//登录超时跳转至登录页
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (!token && to.path !== '/login') {
    next('/login');
  }
  next();
})