在从零开始搭建一个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 [email protected]
* @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 很传统的路由地址。