终于闲了下来,写一篇关于vue动态路由如何使用的文章,本文希望通过一个最简单的实例使同学们搞懂动态路由基础云云。
一套vue的 create,然后快进到项目创建完毕。
1. 第一步,上来就创建了四个页面,
这四个页面是否显示由后端给出的数据进行判定。(当然了,这里的数据由我模拟。)
2.看一看我的route文件,模式的话,用的history模式作示例罢。
非常基础的页面,包含了一个登录,一个首页。
逻辑也很简单,登录成功,拿到页面路由数据,解析路由数据,并添加路由。然后在首页将页面渲染一下。
3. 模拟后端返回数据,并在登录成功之后进行数据添加。
假设登陆成功获取的数据就是下面这个。
const routeArr = [{ "path": "/A", "name": "A", "component": "A" }, { "path": "/B", "name": "B", "component": "B" }, { "path": "/C", "name": "C", "component": "C"}]
登录地逻辑:这里直接去操作路由数组。
(1)解析路由的方法:
一个map就解决了,是不是感觉太快了??
注意到其中有一个routeList了嘛,这里注意一下,由于返回的路由数据是字符串,并不是对应的component,于是我们应该有一个存放所有页面路由的地方。
routeList.js.
再回过头来看看登录的逻辑,拿到解析完毕后的路由表就进行添加完事了。 这里补充一个小知识点,addRoutes添加的路由,你通过打印router是看不到的喔。
你以为你成功了,其实并不。还有一个坑。!!!
页面一刷新,就空白了。我去。
在刷新后动态路由需要重新获取,而to对象是在动态路由生成之前产生,所以获取不到真正路由信息。摘自网络。
所以重点是:需要重新加载路由,addRoute.
于是在main.js(入口文件):
在这里作路由重加载。
~如此基本的动态路由解决。