Vue实现动态路由导航的示例

智慧之光

1、导航守卫

1. “导航” 表示路由正在发生改变

复制代码

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

1. v-router官网：<a href="https://router.vuejs.org/zh/guide/ " rel="external nofollow" target="_blank">https://router.vuejs.org/zh/guide/ </a>

复制代码

我这里用到的是全局前置守卫：
在路由中可以使用router.beforeEach，注册一个全局前置守卫

1. const router = new VueRouter({ routes });
   
2. 
   
3. router.beforeEach((to, from, next) => {
   
4.   const isover = to.matched.some(record => record.path == '/over')
   
5.   if (isover || to.path == '/overview') {
   
6.     if (!store.getters.token) {  // 未登录
   
7.       next('/login');
   
8.       return
   
9.     }
   
10.     if (!isHome) {
    
11.       next();  
    
12.       return
    
13.     }
    
14.   } else {
    
15.     next()  // 无需登录验证
    
16.   }
    
17. })

复制代码

当一个导航触发时，全局前置守卫按照创建顺序调用，守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。
每个守卫方法接收3个参数
to: Route:即将要进入的目标 路由对象
from: Route ：当前导航正要离开的路由
next: Function ： 一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数
1.next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
2.next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
3.next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
4.** 确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错 **这里有一个在用户未能验证身份时重定向到 /login 的示例：

1. // BAD
   
2. router.beforeEach((to, from, next) => {
   
3.   if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
   
4.   // 如果用户未能验证身份，则 `next` 会被调用两次
   
5.   next()
   
6. })

复制代码

1. // GOOD
   
2. router.beforeEach((to, from, next) => {
   
3.   if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
   
4.   else next()
   
5. })

复制代码

二、功能展示

三、原理

1. 对于路由的导航动态实现，我们首先要确定我们拥有的路由有哪些，并且对于命名有一定的良好习惯。其中最重要的就是在我们的路由里面进行设定，设置我们的路由守卫，能对路由进行控制和及时的更新我们的路由数据，然后就可以直接在功能实现区域进行调用实现了。

复制代码

四、功能实现

1.router文件夹

在router里面引入我们的store

路由守卫

1. // 路由守卫
   
2. router.beforeEach((to, from, next) => {
   
3.   localStorage.setItem("currentPathName", to.name)  // 设置当前的路由名称，为了在Header组件中去使用
   
4.   store.commit("setPath")  // 触发store的数据更新
   
5.   next()  // 放行路由
   
6. })

复制代码

2.store文件夹

1. import Vue from 'vue'
   
2. import Vuex from 'vuex'
   
3. 
   
4. Vue.use(Vuex)
   
5. 
   
6. const store = new Vuex.Store({
   
7.   state: {
   
8.     currentPathName: ''
   
9.   },
   
10.   mutations: {
    
11.     setPath (state) {
    
12.       state.currentPathName = localStorage.getItem("currentPathName")
    
13.     }
    
14.   }
    
15. })
    
16. 
    
17. export default store
    

复制代码

3.main.js

1. import Vue from 'vue'
   
2. import App from './App.vue'
   
3. import router from './router'
   
4. import store from "@/store";
   
5. import ElementUI from 'element-ui';
   
6. import 'element-ui/lib/theme-chalk/index.css';
   
7. import request from "@/utils/request";
   
8. import './assets/css/global.css'
   
9. // import * as echarts from 'echarts'
   
10. Vue.config.productionTip = false
    
11. 
    
12. Vue.use(ElementUI,{size: "mini"});
    
13. 
    
14. Vue.prototype.request = request;
    
15. 
    
16. new Vue({
    
17.   router,
    
18.   store,
    
19.   render: h => h(App)
    
20. }).$mount('#app')
    

复制代码

4.实现

1. <template>
   
2.   <div style="display: flex; line-height: 35px; background-color: whitesmoke">
   
3.     <div style="flex: 1">
   
4.       <span :class="collapseBtnClass" style="cursor: pointer; font-size: 18px"></span>
   
5.       <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
   
6.         <img src="../assets/images/宿舍管理.png" alt=""
   
7.              style="width: 30px; position: relative; top: 20px; right: 5px">
   
8.         <h3 style="margin-left: 30px; color: lightskyblue">宿舍后台管理</h3>
   
9.           <el-breadcrumb-item :to="'/'" style="margin-left: 200px; margin-top: -10px">首页</el-breadcrumb-item>
   
10.           <el-breadcrumb-item style="margin-top: -10px;">{{ currentPathName }}</el-breadcrumb-item>
    
11.       </el-breadcrumb>
    
12.     </div>
    
13.     <el-dropdown style="width: 130px; cursor: pointer">
    
14.       <div style="display: inline-block; float: right; margin-right: 10px">
    
15.         <img :src="user.avatarUrl" alt=""
    
16.              style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
    
17.         <span>{{user.nickname}}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
    
18.       </div>
    
19.       <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
    
20.         <el-dropdown-item style="font-size: 14px; padding: 5px 0">
    
21.           <span style="text-decoration: none" @click="person">个人信息</span>
    
22.         </el-dropdown-item>
    
23.         <el-dropdown-item style="font-size: 14px; padding: 5px 0">
    
24.           <span style="text-decoration: none" @click="logout">退出登录</span>
    
25.         </el-dropdown-item>
    
26.       </el-dropdown-menu>
    
27.     </el-dropdown>
    
28.   </div>
    
29. </template>
    
30. 
    
31. <script>
    
32. export default {
    
33.   name: "Header",
    
34.   props: {
    
35.     collapseBtnClass: String,
    
36.     user: Object
    
37.   },
    
38.   computed: {
    
39.     currentPathName () {
    
40.       return this.$store.state.currentPathName;　　//需要监听的数据
    
41.     }
    
42.   },
    
43.   data() {
    
44.     return {
    
45.       user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    
46.     }
    
47.   },
    
48.   methods: {
    
49.     logout() {
    
50.       this.$router.push("/login")
    
51.       this.$message.success("退出成功")
    
52.     },
    
53.     person(){
    
54.       this.$router.push("/mall/person")
    
55.     }
    
56.   }
    
57. }
    
58. </script>
    
59. 
    
60. <style scoped>
    
61. 
    
62. </style>

复制代码

⛵小结

到此这篇关于Vue实现动态路由导航的示例的文章就介绍到这了,更多相关Vue 动态路由导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276326.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！