点击蓝字关注我们
路由
在vue中,route,即为前端路由。下面是专业名词解释:
前端渲染和后端渲染
在使用route之前,我们需要知道一些基础知识:
改变url不刷新页面:
使用hash值来进行变化route。
location.hash("路径")
通过html对象修改url:
在该基础上,把urlpush进堆栈。然后使用back方法,弹出栈
上面是用push方法,就是一直压栈和出栈,下面是用replace来进行代替当前站点,就不是栈方法:
使用go来进行前后移动:
或者向前:
vue-route的使用
安装成功后,有在src下有route文件夹:
创建组件
在compoments文件夹下面创建about.vue:
编写App.vue。创建两个标签,点击哪个,显示哪个页面,运行如下:
第一个页面加载[使用重定向方法]:
效果:
使用history模式来避免url地址中出现#,在route目录下的index.js中定义:
route的tag属性
将route-link标签变成button:
效果:
点击route,对应按钮变红色:
效果如下:
或者直接在route下面的index.js写:
使用按钮替换route-link:
也就是说,使用写代码的方法,来变换组件视图,效果如下:
动态路由的使用
什么是动态路由?假设我几个用户进入的页面参数是不一样的,那么此情况就是动态路由:
App.vue代码:
test.vue代码如下:
目录一览:
从保存的cookie得知,账户为zhangsan,那么url显示张三:
认识路由的懒加载
所谓懒加载,就是用到时再加载、
使用例子:
完整使用:
构建后,结果:
认识嵌套路由
1.创建子组件test2.vue,导出为
2.路由定义
3.在about组件中使用子组件
4.在app.vue中定义路由about
5.运行结果
球分享
球点赞
球在看