Vue路由系统
一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统。
一、VueRouter实现原理
VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码:
Title
可以看到,通过监控锚点值的改变,页面上面的内容可以跳转到我们需要显示的页面。
二、VueRouter安装使用
Title
三、VueRouter命名路由
Title
此外,还有另一种命名路由方式,如下所示:
Title
四、VueRouter路由中使用参数
Title
五、VueRouter参数实现原理
Title
六、VueRouter子路由
Title
七、VueRouter子路由append
Title
使用以上方式,路径是写死在属性中的,所以子路径会不断的append到最后,导致访问不到相应页面。可以采用另一种,动态绑定属性,如下代码所示:
Title
注意,必须使用name查找组件和路径的对应关系,而不能使用path。
八、VueRouter子路由非append
Title
九、VueRouter路由重定向redirect
Title
十、VueRouter手动路由
Title
十一、VueRouter路由钩子
Title
十二、VueRouter在路径中去掉#号
在创建路由实例时,我们可以新增一个属性,该属性用来去掉在路径中显示#号,它的属性名为mode,属性值为’history’
Title