导航守卫

1. 环境准备

1.1 安装Element-Plus

npm install element-plus

1.2 注册Element-Plush

需要在 main.ts 文件中注册

import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(ElementPlus).mount('#app')

1.3 定义组件

定义一个首页组件

<template><div>首页</div>
</template><script setup lang="ts">
</script>

再创建一个登录组件：

<template><div class="login">登录</div>
</template><script setup lang="ts">
import {ref} from 'vue'</script><style lang="less" scoped>
.login {height: 100%;display: flex;justify-content: center;
}
</style>

1.4 配置路由

在 src 目录，新建 router 目录，然后创建 index.ts 路由配置文件。

import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";const routes: Array<RouteRecordRaw> = [{path: '/',alias: ['/index'],component: () => import('../views/Index.vue'),},{path: '/login',component: () => import('../views/Login.vue'),}
]
const router = createRouter({history: createWebHashHistory(),routes,
})export default router

1.5 挂载路由

在 main.ts 文件中挂载路由。

import { createApp } from 'vue'
import App from './App.vue'import router from './router'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(router).use(ElementPlus).mount('#app')

1.6 定义入口

在根组件 App.vue 中使用路由

<template><router-view></router-view>
</template>
<script setup lang="ts">
</script>
<style>
* {padding: 0;margin: 0;
}
html,body,#app {width: 100%;height: 100%;
}
</style>

2. 完善登录

<template><div class="login"><!-- 1. 添加登录的表单 --><el-card class="box-card"><span>登录</span><!-- 3. 把数据和表单进行绑定 --><el-form ref="userFormRef" :model="user" :rules="rules" label-width="60px"><!-- 9. 绑定校验规则，1）在 el-form 中添加 :rules="rules" 2）在 el-form-item 中添加 prop 属性 --><el-form-item label="账号" prop="account"><!-- 4. 把输入框与数据（表单对象）绑定 --><el-input type="text" v-model="user.account" placeholder="账号"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="user.password" placeholder="密码"></el-input></el-form-item><el-form-item><!-- 5. 添加表表单提交事件 --><el-button type="primary" @click="onSubmit(userFormRef)">登录</el-button><el-button @click="onReset(userFormRef)">取消</el-button></el-form-item></el-form></el-card></div>
</template><script setup lang="ts">
import {reactive, ref} from 'vue'
import {ElMessage, FormItemRule} from 'element-plus'
import type { FormInstance } from 'element-plus'// 10. 实现重置功能 1）需要在 el-form 标签上指定 ref="userFormRef" 2）在事件中把 userFormRef 以参数的方式传递给事件对象 3）在声明一个 userFormRef 响应式对象
const userFormRef = ref<FormInstance>()// 定义类型
type User = {account: string,password: string,
}
// 2. 定义数据
const user = reactive<User>({account: '',password: '',
})
// 6. 实现事件
const onSubmit = (formEl: FormInstance | undefined) => {// 11. 实现提交时校验表单//console.log(user)formEl?.validate(valid => {//console.log(valid)if (valid) {console.log(user)// 把数据存到浏览器的本地localStorage.setItem('token', JSON.stringify(user)) // 把对象转字符串ElMessage.success('登录成功！')} else  {ElMessage.error('登录失败！')}})}
const onReset = (formEl: FormInstance | undefined) => {console.log('-------111--------' + formEl)if (!formEl) returnformEl.resetFields() // 重置方法
}// 7. 定义校验器类型
type Rules = {[key in keyof User]?: Array<FormItemRule>
}
// 8. 定义校验规则
const rules = reactive<Rules>({// 写要校验的字段名称account: [ // 是一个数组，数组中是对象{ // 对象required: true, // 表示这个字段必须输入message: '账号不能为空！', // 校验失败后的提示信息type: 'string', // 输入的数据类型trigger: 'blur', // 校验触发的条件：是失去焦点后就触发}],password: [{required: true,message: '密码不能为空!',type: 'string',trigger: 'blur',},{min: 6, // 指定密码的最小字符数max: 16, // 指定密码的最大字符数message: `密码的长度在 6 和 16 之间`,trigger: 'blur',}]
})</script><style lang="less" scoped>
.login {margin-top: 20px;display: flex;justify-content: center;.box-card {width: 480px;text-align: center;span {display: block;font-size: 24px;margin-bottom: 15px;}}
}
</style>

3. 导航守卫

在 main.ts 文件中添加导航守卫的配置

// 定义白名单
const whiteList = ['/']
router.beforeEach((to, from, next) => {if (whiteList.includes(to.path) || localStorage.getItem('token')) {next()} else {next('/')  // 如果来源路由不在白名单中或没有进行登录，则转到登录路由}
})

每个守卫方法接收三个参数：
to: Route，即将要进入的目标，路由对象；
from: Route，当前导航正要离开的路由；
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

2. 路由元信息

在路由配置列表中通过 meta 属性来配置路由元信息。

    {path: '/index',//alias: ['/index'],component: () => import('../views/Index.vue'),meta: { // 路由元信息title: '首页标题'}},

3. 动态路由

对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。

3.1 编写后端

3.1.1 创建一个后端项目

在IDE中创建一个目录，如：router-server 来作为后端项目的名称。

3.1.2 安装依赖

npm init -y # 生成 package.jsonnpm install ts-node -g# node.js 声明文件
npm install @types/node -Dnpm install express# express 声明文件
npm install @types/express -D

3.1.3 编写基础服务

在项目的根目录下新建 index.ts 文件，代码如下：

import express, {Express, Request, Response} from 'express'// 创建应用对象
const app: Express = express()// 发送请求
app.get('/login', (req: Request, res: Response) => {// 设置可跨域res.header('Access-Control-Allow-Origin', '*')// 验证登录是否存在，假设账号为 admin 密码为 123456if (req.query.account === 'admin' && req.query.password === '123456') {// 登录成功后向客户端响应数据res.json({route: [{path: '/demo01',name: 'Demo01',component: 'Demo01.vue'},{path: '/demo02',name: 'Demo02',component: 'Demo02.vue'},{path: '/demo03',name: 'Demo03',component: 'Demo03.vue'}]})} else if (req.query.account === 'jock' && req.query.password === '123456') {res.json({route: [{path: '/demo01',name: 'Demo01',component: 'Demo01.vue'},{path: '/demo02',name: 'Demo02',component: 'Demo02.vue'}]})} else {res.json({code: 400,message: '账号或密码错误！'})}
})// 启动服务并设置端口
app.listen(9999, () => {console.log('Local: http://localhost:9999')
})

3.1.4 配置服务

修改 package.json 文件，在 scripts 标签中定义启动项目的执行脚本。

{"scripts": {"dev": "ts-node index.ts","test": "echo \"Error: no test specified\" && exit 1"}}

3.1.5 启动服务

做完以上操作后，执行如下命令来启动服务。

npm run dev

3.2 编写前端

3.2.1 创建组件

在项目中创建 Demo01.vue、Demo02.vue 和 Demo03.vue 这三个组件，它们初始代码如下：

<template><h3>Demo01</h3>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

3.2.2 安装axios

由于我们需要异步请求服务端来进行登录，因些，我们需要安装 axios 来实现异步操作。

npm install axios

3.2.3 实现登录

安装好 axios 后，在登录组件 Login.vue 中使用。

import axios from 'axios'// 异步请求后端接口
const initRouter = async () => {const result = await axios.get('http://localhost:9999/login', { params: user })console.log(result)
}// 6. 实现事件
const onSubmit = (formEl: FormInstance | undefined) => {// 11. 实现提交时校验表单//console.log(user)formEl?.validate(valid => {//console.log(valid)if (valid) {console.log(user)// 把数据存到浏览器的本地localStorage.setItem('token', JSON.stringify(user)) // 把对象转字符串ElMessage.success('登录成功！')// 调用异步请求接口initRouter()} else  {ElMessage.error('登录失败！')}})
}

3.2.4 添加路由

把从服务端响应回来的数据添加到路由中，这时需要使用到 router.addRoute() 和 router.removeRoute() 这两个动态路由对象方法。

// 异步请求后端接口
const initRouter = async () => {const result = await axios.get('http://localhost:9999/login', { params: user })//console.log(result)//console.log(result.data)result.data.route.forEach((v: any) => {// 动态添加路由router.addRoute({path: v.path,name: v.name,component: () => import(`./${v.component}`)})})// 跳转到首页router.push('/index')
}

vue路由第三篇-导航守卫、路由元信息、动态路由相关推荐

什么是静态路由，其特点是什么？什么是动态路由，其特点是什么？
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么? (1)静态路由是由系统管理员设计与构建的路由表规定的路由.适用于网关数量有限的场合,且网络拓朴结构不经常变化的网络.其缺点是不能动态地适用 ...
VUE探索第三篇-路由(vue router)
一.vue router介绍 Vue Router是Vue.js官方的路由器,页面间的跳转(比如A->B->C)是一组路由,而Vue Router是管理这些路由的集成器.Vue Route ...
Vue 路由懒加载导航守卫keep-alive
懒加载组件导入方式 const Foo = () => import('./Foo.vue') const router = new VueRouter({routes: [{ path: '/ ...
网络协议梳理（三）（网关和路由器、动态路由算法、Bellman-Ford算法、Dijkstra算法、动态路由协议、TCP和UDP）
MAC 头和 IP 头的细节在任何一台机器上,当要访问另一个IP地址的时候,都会使用CIDR和子网掩码去判断目标IP地址和当前机器的IP地址是否属于同一网段. 如果是同一网段--如果ARP缓存中存有 ...
java 路由框架_使用Spring框架和AOP实现动态路由
本文的大体思路是展示了一次业务交易如何动态地为子系统处理过程触发业务事件.本文所示的例子使用Spring框架和Spring AOP有效地解耦业务服务和子系统处理功能.现在让我们仔细看看业务需求. 业务 ...
“约见”面试官系列之常见面试题之第九十七篇之怎么定义vue-router的动态路由（建议收藏）
在router目录下的index.js文件中,对path属性加上/:id. 使用router对象的params.id 例如 : this.$route.params.id
Sentinel(第三篇)_Springboot2.x+Sentinel监控信息基于MySQL持久化
前言根据官方提供的wiki文档,sentinel控制台的实时监控数据,默认提供的存储数据时间为 5 分钟以内的数据.如果我们的需求是需要持久化的,那就需要我们自己定制实现相关的接口. https:/ ...
vue-router进阶：路由使用归纳、路由导航守卫、导航守卫解析流程、
一.定义和理解导航守卫的作用:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航. >>项目中应用场景举例:路由页面跳转时候进行登陆验证:路由跳转判断: 有多种机会 ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...

vue路由第三篇-导航守卫、路由元信息、动态路由