vue怎么一步到位实现动态路由

今天小编给大家分享一下vue怎么一步到位实现动态路由的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先呢，先看看静态路由的配置，简单预览一下，熟悉的可以直接跳过，说这部分，是为了熟悉一下路由的配置，配置动态路由其实就是把静态路由存到数据库，在取出来放进路由表（静态是直接写在路由表里）。1.创建router/index.js文件，这里只有一些简单的页面2.创建router/permission.js文件，配置导航守卫，可以在每次路由跳转前做一些操作，待会获取动态路由操作也在这里配置这里引用了一个插件，Nprogress，就是下图的蓝色小进度条。不用也可以3.在main.js里引入刚才创建的router下的index.js文件和permission.js文件，如下4.在App入口中放入路由跳转的视图区，跳转的路由页面都显示在这里现在静态路由就配好了，可以正常的跳转了！文件夹长这样接下来开始配置动态路由了！有坑的地方我会说明一下。1.首先呢，router/index.js，没有什么需要改的，把你需要动态获取的路由信息删除掉即可，可以留一部分静态路由，如登录页，首页等等，若全删，routes赋为[]即可。2.创建一个文件，我命名为getAsyncRouter.js，用来处理获取到的动态路由信息。这里是两个函数，把获取到的数据处理成路由表数据，将其变化成 route 的形式。fnAddDynamicMenuRoutes 用于递归菜单数据。getRoute 用于返回某个数据转换的 路由格式。注释写的应该算是很详细了，主要讲一下思路：对数据进行遍历，定义两个数组（temp，route），temp 用于保存没有子路由的路由，route 用于保存存在子路由的路由。如果某个数据存在 子路由，则对子路由进行遍历，并将其返回结果作为当前数据的 children。并使用 route 保存路由。如果某个数据不存在子路由，则直接使用 temp 保存路由。最后，返回两者拼接的结果，即为转换后的数据。route 格式一般如下：path：指路由路径（可以根据路径定位路由）。name：指路由名（可以根据路由名定位路由）。component：指路由所在的组件。children：指的是路由组件中嵌套的子路由。meta：用于定义路由的一些元信息。这里有个大坑！！！在配置component的时候，需要动态导入组件，也就是vue异步组件，查看文档如下可知，有两种导入方式，import和require方式。这里简单说一下，1 import属于es6导入方式，只支持静态导入，也就是说，你不能够使用变量或表达式，只能使用字符串。2 require属于commonJS方式，可以支持动态的导入，但笔者尝试中，可以使用“模板字符串方式，貌似也无法直接使用变量。这里尽量用字符串拼接，而不是用变量去代替拼接的字符串！由于import不支持动态导入方式，笔者采用的是require的方式，并且在webpack文档中有这样一段话。综上所述，就是说，组件的导入可以使用字符串拼接的方式导入，可以使用模板字符串导入（字符串中含有变量），但是使用模板字符串导入时不能够只使用变量！！必须指定一个目录，不能全用变量代替！这个现象其实是与webpack import()的实现高度相关的。由于webpack需要将所有import()的模块都进行单独打包，所以在工程打包阶段，webpack会进行依赖收集。此时，webpack会找到所有import()的调用，将传入的参数处理成一个免费云主机域名正则，如：也就是说，import参数中的所有变量，都会被替换为【.*】，而webpack就根据这个正则，查找所有符合条件的包，将其作为package进行打包。所以动态导入的正确姿势，应该是尽可能静态化表达包所处的路径，最小化变量控制的区域。3.有了处理动态路由数据的函数，那就需要在合适的地方调用，以发挥作用。这时就需要用到beforeEach了，在router/permission.js文件，配置导航守卫，可以在每次路由跳转前做一些操作，这里就是获取动态路由了注释写的比较详细了，主要说下思路：首先确定获取动态菜单数据的时机。一般在登录成功跳转到主页面时，获取动态菜单数据。由于涉及到路由的跳转（登录页面 -> 主页面），所以可以使用 beforeEach 进行路由导航守卫操作。　 但由于每次路由跳转均会触发 beforeEach ，所以为了防止频繁获取动态路由值，这里采用vuex方式存储了获取的路由信息，如果已获取路由，就直接跳转，否则就获取一次动态菜单数据并处理。如果不采用vuex方式也可以存到sessionStorage里面，总之就是保存一下获取的路由信息，以免重复获取。4接下来看一看，store的写法注意：vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。到这里，动态路由就已经配置好了，总体来说不是很难，主要是有坑！但只要理清了思路，写起代码就会很清晰。1.首先是component动态导入的问题，由于webpack的版本不同，需要根据情况来采用import和require方式来导入，如果导入不正确多半会报错，找不到module等等。或者不报错，但路由跳转是空白页。如果导入正确则一定可以跳转正常，否则，请查找正确的导入方法！路由跳转正确，能显示跳转的组件，就完成了一大半！2.路由的跳转的地方，由于我们项目采用的是左侧菜单栏，有二级菜单，所以当路由跳转正常时，还需确定路由跳转所渲染的位置是否正确！在刷新页面时遇到一个问题，动态路由表会随着vuex的刷新而消失。处理：这里在app.vue页面刷新时利用sessionStorage存储一下store，防止刷新丢失vuex。如下：另外，在登录成功后也获取了一下动态路由。这样处理下来，刷新时也不会丢失路由了！以上就是“vue怎么一步到位实现动态路由”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注百云主机行业资讯频道。

相关推荐: js怎么创建、删除、追加及替换元素节点

今天小编给大家分享一下js怎么创建、删除、追加及替换元素节点的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一免费云主机域名下吧。一.创建元素节点crea…