vue2.x的动态路由也没有那么难嘛~(新手上路版本)

777 阅读2分钟

终于闲了下来,写一篇关于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(入口文件):

在这里作路由重加载。

~如此基本的动态路由解决。