Vue路由系统详述 -- 2019-08-08 18:01:24
Posted gqy02
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue路由系统详述 -- 2019-08-08 18:01:24相关的知识，希望对你有一定的参考价值。
原文: http://106.13.73.98/__/55/
一切分离都是为了更好的结合，本文详细介绍了前后端架构分离之后，前端如何实现路由的控制，即Vue路由系统——VueRouter.
VueRouter下载地址(默认最新版本)：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
@
*
VueRouter实现原理：**
==根据锚点值的改变，修改组件内容.==
我们先来看看不使用VueRouter，自己实现路由的控制，如下代码：
<body>
<div id="app"></div>
</body>测试效果如下图：
可以看到，通过改变锚点值，页面跳转到我们需要的内容.
再来看看VueRouter实现路由的控制：
<body>
<div id="app"></div>
</body>测试效果如下图：
路由命名
方式一：
==通过在vue-router对象中增加name属性来指定路由名称.==
==调用方式：v-bind:to= name: "路由名称" ==
<body>
<div id="app"></div>
</body>方式二：
<body>
<div id="app"></div>
</body>路由参数
<body>
<div id="app"></div>
</body>测试效果如下图：
***
路由参数的实现原理
<body>
<div id="app"></div>
</body>测试效果如下图：
子路由
<body>
<div id="app"></div>
</body>测试效果如下图：
可见，使用此方法，子页面不能正常显示.
***
子路由之append
==append参数会在路径后面追加子路由的路径，注意：会在后面一直追加.
append参数只适用于只需一层子路由的情况.==
<body>
<div id="app"></div>
</body>测试效果如下图：
这里只点击了一次 子页面01，显示的内容是正常的，后面的路径也是正常的.
下面的是点击了两次：
可见，内容显示不正常了，后面的路径也不正常了——==append参数会在后面一直添加子路由中的路径.==
使用以上方式，路径是写死在属性中的，所以子路径会不断的append到最后面，导致后续访问不到响应的页面，可以采用另一种方式——动态绑定属性.
动态绑定属性
==动态绑定属性即给子路由命名，使用子路由命的名称来实现子路径的正常切换.==
<body>
<div id="app"></div>
</body>==注意：此方法必须使用name查找组件和路径的对应关系，而不能使用path.==
***
子路由之append升级版
==所谓的append升级版其实就是同时使用动态绑定属性和append.==
<body>
<div id="app"></div>
</body>子路由之非append
<body>
<div id="app"></div>
</body>路由重定向
<body>
<div id="app"></div>
</body>如上代码，我们点击支付链接时，将会跳转至登陆页面.
手动路由
<body>
<div id="app"></div>
</body>如上代码，点击按钮即可跳转至测试页面.
路由钩子
<body>
<div id="app"></div>
</body>如上代码，通过路由钩子函数实现了点击支付链接时跳转至登陆页面的功能.
在路径中去掉"#"号
在实例化的router对象中增加一个属性：==mode: ‘history‘==，该属性可将路径中显示的"#"号去掉.
<body>
<div id="app"></div>
</body>原文: http://106.13.73.98/__/55/
以上是关于Vue路由系统详述 -- 2019-08-08 18:01:24的主要内容，如果未能解决你的问题，请参考以下文章
Vue组件系统 -- 2019-08-08 18:01:47
Vue组件系统 -- 2019-08-08 18:01:48