从零开始搭建一个VUE3.0项目之路由跳转和拦截（二）

在从零开始搭建一个VUE3.0项目之基础搭建（一） 之后，接下来需要进行单页面上的开发，通过vue-router进行页面路由。

第一步：

首先创建一个用来管理所有路由的js

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


export const constantRoutes = [
  {
    path: '/',
    //重定向到home界面
    redirect: "/home"
  },
  {
    path: '/home',
    component: () => import('@/views/home.vue'),
    meta: {
      title: '首页'
    }
  },
  {
    path: '/login',
    //如果写成：component: () => import('@/views/login') 自动匹配login文件夹下面的index.vue 等价于下面的写法
    component: () => import('@/views/login/index.vue'),
    meta: {
      title: '登录界面'
    }
  }
]

const router = createRouter({
  // 路由采用history模式
  history: createWebHistory(),
  routes: constantRoutes,
})

export default router

第二步：

创建一个路由拦截器，拦截需要token的界面

/**
 * @author hjljy   hjljy@outlook.com
 * @description 路由守卫，权限拦截
 */
import router from '@/router'

router.beforeEach(async (to, from, next) => {
  //获取浏览器本地缓存的token
  const hasToken = localStorage.getItem("TOKEN");
  const routesWhiteList = [
    '/login',
    '/test'
  ]
  // 如果存在token 直接放行
  if (hasToken) {
    //TODO 判断是否存在其他必须的信息 例如登录用户的id,角色
    next()
  } else {
    // 判断是否是白名单路径   
    if (routesWhiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next({ path: '/login', replace: true })
    }
  }
})
router.afterEach((to) => {
  document.title = to.meta.title
})

第三步：

最后在main.js当中引入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

// 引入路由拦截
import '@/router/permission'

const app = createApp(App);
// 关闭生产模式下给出的提示，提高
app.config.productionTip = false
app.use(Antd).use(router)
app.mount('#app')

最后完整项目节后如下：

知识点说明

记录下在搭建学习当中学习到的知识点

import 引入组件，名称省略等相关问题

1 import 在引入依赖库的时候不需要写相对路径 例如：import Antd from 'ant-design-vue'; 依赖的是ant-design-vue

2 import 在引入自己项目里面的东西是需要写相对路径的，例如：import '@/router/permission'

这个其中的@符号可以自己定义（在vue.config.js的 configureWebpack当中配置，或者webpack.base.config.js当中配置），其实就是src目录。参考文章：webpack配置别名alias

3 import 引入组件名称省略的问题，例如： import '@/router/permission' 这里省略了后缀，完整的应该是 import '@/router/permission.js' 。参考文章：Vue中import from的来源：省略后缀与加载文件夹

前端路由模式

前端路由主要有两种模式：hash模式和 history模式 都是依赖于浏览器实现的，并不是语言特性。

hash模式：http://127.0.0.1:8080/#home #号后面的home就是hash地址，通过监听home的变化进行js的调用，处理事件。

history模式：http://127.0.0.1:8080/home 很传统的路由地址。

参考文章：细说前端路由的hash模式和 history模式