博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue路由系统
阅读量:5350 次
发布时间:2019-06-15

本文共 1295 字,大约阅读时间需要 4 分钟。

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

转载于:https://www.cnblogs.com/wangyueping/p/11451404.html

你可能感兴趣的文章
ArcScene 高程不同的表面无法叠加
查看>>
[ONTAK2010] Peaks
查看>>
DLL 导出函数
查看>>
windows超过最大连接数解决命令
查看>>
12个大调都是什么
查看>>
angular、jquery、vue 的区别与联系
查看>>
参数范围的选择
查看>>
使用 MarkDown & DocFX 升级 Rafy 帮助文档
查看>>
THUPC2019/CTS2019/APIO2019游记
查看>>
Nodejs Express模块server.address().address为::
查看>>
4.3.5 Sticks (POJ1011)
查看>>
POJ 2960 S-Nim 博弈论 sg函数
查看>>
Dijkstra模版
查看>>
一个简单的插件式后台任务管理程序
查看>>
GDB调试多进程程序
查看>>
组合数
查看>>
CMD批处理延时启动的几个方法
查看>>
转:LoadRunner中web_custom_request 和 web_submit_data的差别
查看>>
HTC G7直刷MIUI开启A2SD+亲测教程
查看>>
shiro的rememberMe不生效
查看>>