Vue.js:Vue-Router动态路由从服务器接口获取路由数据

简介: Vue.js:Vue-Router动态路由从服务器接口获取路由数据

目录

文档

版本号

"vue": "2.6.10",
"vue-router": "3.6.5",

有几种方式实现动态路由

  1. 前端配置完整路由,通过接口返回的数据判断是否可显示,是否可访问
  2. 前端配置部分路由,由后端接口返回的数据生成新路由
  3. 抛开路由的思维,是否能直接通过url查询参数或者是动态路径参数解决问题

需求

部分页面通过服务器端接口返回的参数判断是否显示

用户可以添加新的分类,分类和路由的显示方式一致,拥有和路由相同的逻辑,故而采用通过服务端返回数据生成动态路由的方式解决

实现思路

1、添加路由

通过服务端接口返回的数据生成路由,是异步返回的数据,动态添加

可以通过Vue-Router提供的api,动态添加路由数据

addRoute(parentName: string, route: RouteConfig): () => void

文档说:

如果该路由规则有 name,并且已经存在一个与之相同的名字,则会覆盖它。

我想直接覆盖原有路由,这样路由位置就不变了

实际操作的时候发现:并不会覆盖,控制台会提示路由重复

2、添加时机

应该在路由跳转之前进行

router.beforeEach(async (to, from, next) => {
  // 需要有一个全局变量记录是否添加过
  if (!globalData.hasAddDynamicRoute) {
    await Store.dispatch('router/updateDynamicRoutes')
    globalData.hasAddDynamicRoute = true
  }
})

3、获取路由配置

该接口获取的路由数据是一维数组,和路由配置格式不一样

// 不要使用this.$router.options.routes
getRoutes(): RouteRecord[]

页面上显示的时候,需要从vuex获取路由信息,可以及时刷新页面数据

4、响应式路由

既然是动态路由,所以需要响应式,当路由数据发生变化时,可以及时的获取通知

通过vuex状态管理实现

// store/modules/router.js
export default {
  namespaced: true,
  state: {
    routes: [],
  },
  getters: {
    // 返回路由数据
    getRoutes(state) {
      return state.routes
    }
  },
  mutations: {
    setRoutes(state, routes) {
      state.routes = routes
    },
  },
  actions: {
    async updateDynamicRoutes({ commit }, userinfo) {
      // 添加动态路由
      await addDynamicRoutes()
      // 获取完整的路由信息
      const routes = router.getRoutes()
      commit('setRoutes', routes)
    },
  },
}

5、路由跳转

动态路由首次跳转的时候,动态路由还没有添加,需要转换处理

// 根据 to.name 来判断是否为动态路由
if (!to.name) {
    // 当前路由是动态的,确定是否存在
    if (router.getRoutes().findIndex((i) => i.path === to.path) !== -1) {
      next({ ...to, replace: true })
    } else {
      next('/')
    }
} else {
    next()
}

6、路由排序

添加的路由只能在最后,无法指定插入位置

通过meta元数据,添加排序字段order_value,可以在显示的时候实现排序

meta: {
    order_value: 1,
},

7、更新路由

如果数据变化,需要更新路由数据,再次添加同样会提示重复

[vue-router] Duplicate named routes definition

更新前需要先重置路由数据

// src/router/index.js
// 路由的创建
function createRouter() {
  return new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
  })
}
const router = createRouter()
// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}
export default router

参考文章


相关文章
|
5月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
894 58
|
7月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
11月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
428 0
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
12月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
257 3
|
12月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
12月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
1974 0
|
12月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
585 1
|
11月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
406 0
|
12月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
456 0