vue项目router路由配置

路由配置

src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'

const publicRoutes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/user/login.vue'),
  },
  {
    path: '/',
    // 注意：带有路径“/”的记录中的组件“默认”是一个不返回 Promise 的函数
    component: () => import('@/layout/index.vue'),
    redirect: '/profile',
    children: [
      {
        path: '/profile',
        name: 'profile',
        component: () => import('@/views/user/profile.vue'),
        meta: {
          title: '个人中心',
          icon: 'User'
        }
      },
      {
        path: '/404',
        name: '404',
        component: () => import('@/views/system/404.vue'),
      },
      {
        path: '/401',
        name: '401',
        component: () => import('@/views/system/401.vue'),
      }
    ]
  }
]

const privateRoutes = [
  {
    path: '/user',
    component: () => import('@/layout/index.vue'),
    redirect: '/user/manage',
    meta: {
      title: '用户',
      icon: 'User'
    },
    children: [
      {
        path: '/user/manage',
        component: () => import('@/views/user/userManage.vue'),
        meta: {
          title: '用户管理',
          icon: 'Bicycle'
        }
      },
      {
        path: '/user/role',
        component: () => import('@/views/user/roleManage.vue'),
        meta: {
          title: '角色管理',
          icon: 'Coin'
        }
      },
      {
        path: '/user/permission',
        component: () => import('@/views/user/permissionManage.vue'),
        meta: {
          title: '权限管理',
          icon: 'Key'
        }
      },
      {
        path: '/user/info/:id',
        name: 'userInfo',
        component: () => import('@/views/user/userInfo.vue'),
        meta: {
          title: '用户信息'
        }
      },
      {
        path: '/user/import',
        name: 'userImport',
        component: () => import('@/views/user/userImport.vue'),
        meta: {
          title: '导入用户'
        }
      }
    ]
  },

  {
    path: '/article',
    component: () => import('@/layout/index.vue'),
    redirect: '/article/ranking',
    meta: {
      title: '文章',
      icon: 'Document'
    },
    children: [
      {
        path: '/article/ranking',
        component: () => import('@/views/article/articleRanking.vue'),
        meta: {
          title: '文章排名',
          icon: 'Memo'
        }
      },
      {
        path: '/article/:id',
        component: () => import('@/views/article/articleDetail.vue'),
        meta: {
          title: '文章详情'
        }
      },
      {
        path: '/article/create',
        component: () => import('@/views/article/articleCreate.vue'),
        meta: {
          title: '文章创建',
          icon: 'DocumentAdd'
        }
      },
      {
        path: '/article/editor/:id',
        component: () => import('@/views/article/articleEdit.vue'),
        meta: {
          title: '文章编辑'
        }
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  // routes: publicRoutes
  routes: [...publicRoutes, ...privateRoutes]
})

export default router

初始化页面

初始化以下页面：

• src/layout/index.vue

• src/views/user/login.vue

• src/views/system/401.vue

• src/views/system/404.vue

• src/views/article/articleCreate.vue

• src/views/article/articleDetail.vue

• src/views/article/articleEdit.vue

• src/views/article/articleRanking.vue

• src/views/user/permissionManage.vue

• src/views/user/profile.vue

• src/views/user/roleManage.vue

• src/views/user/userImport.vue

• src/views/user/userinfo.vue

• src/views/user/userManage.vue

<template>
  <div>
    页面
  </div>
</template>

<script setup>

</script>

<style lang="scss" scope>
</style>

提示

初始化src/layout/index.vue页面时，请加上：<router-view></router-view>

登录鉴权

src/permission.js

import router from './router'
import pinia from './store/index'
import useUserStore from '@/store/user'
// import { storeToRefs } from 'pinia'

let userStore = useUserStore(pinia)

// 白名单
export const whiteList = ['/login', '/404', '/401']

/**
 * 路由前置守卫
 */
router.beforeEach(async (to, from, next) => {
  // 存在 token ，进入主页
  // if (store.state.user.token) {
  // 快捷访问
  if (userStore.token) {
    // 如果是登录页面，跳转到首页
    if (to.path === '/login') {
      next('/')
    } else {
      // 如果不是登录页面，则向服务器获取用户信息（if语句简写）
      !userStore.hasUserinfo && await userStore.getUserinfo()
      next()
    }
  } else {
    // 没有token的情况下，可以进入白名单
    if (whiteList.indexOf(to.path) > -1) {
      next()
    } else {
      next('/login')
    }
  }

})

src/main.ts

import './permission.js'

本章总结

教程到此还无法正常启动项目，因为有一些依赖文件还没有创建。
依赖文件有：

• src/store/index.js
• src/store/user.js

请继续看下一章