vue-router介绍

2024-09-12 22:05:43

vue-router学习

转自：https://my.oschina.net/u/1416844/blog/849971

1. vue-router介绍

vue-router把react-router和ui-router中所有的优点都超了过来
官方文档：https://router.vuejs.org/

2. 路由的快速开始

定义各页面容器组件

定义路由配置文件

在入口文件添加路由配置信息

修改跟组件页面信息

接下来可以启动项目查看路由跳转

3. 路由基础知识介绍

3.1. 动态路由

你可以通过：给一个路由添加参数
之后在组件中通过this.$route.params.参数名获取
- this.$route的api文档https://router.vuejs.org/zh-cn/api/route-object.html
当路由参数发生变化的时候，组件不会被卸载而是复用，这也意味着组件的生命周期钩子不会再被调用，那么你只能监听$routes实例属性知道路由发生了变化

3.2. 嵌套路由

如果有嵌套路由，要用children属性去配置，路由路径会自动拼接
可以给一个页面初始化一个组件用空路由实现

3.3. 用代码进行路由跳转

在组件中你可以通过this.$router获取路由对象

3.4. 命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建Router实例的时候，在routes配置中给某个路由设置名称。

3.5. 命名视图

在跳转一个路由的时候可以同时渲染页面中的多个坑

3.6. 重定向和别名

当路由路径太深的时候，你可以给路由起一个别名，那么通过别名和访问太深的路由的页面渲染效果是一样的

3.7. 三种history

4. 进阶知识点

5. 导航钩子

可以在钩子里面做权限校验和日志记录
一共有三种导航钩子，在钩子中别忘了一定要调用next方法
网址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

最新文章

热门文章