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

从零开始搭建一个VUE3.0项目之路由跳转和拦截(二)_第1张图片

在从零开始搭建一个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')

最后完整项目节后如下:

从零开始搭建一个VUE3.0项目之路由跳转和拦截(二)_第2张图片

知识点说明

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

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模式

你可能感兴趣的:(前端技术,vue.js,前端)