1、vue-router最新版本,vue-router 4.0.6
一、什么是路由
(Vue环境)路由就是组件与url地址的一种映射关系
对于单页面应用程序来说,组件与组件之间的跳转规则就是路由;
vue路由允许我们通过不同的URL访问不同的内容(组件)
通过Vue可以实现多视图的单页面Web应用(single page web application,SPA)
二、基本案例
1、HTML:
<router-link>是一个组件,该组件用于设置一个导航链接,切换不同HTML内容。to属性为目的地址,既要显示的内容
案例:
1、router-link
- 注意: 我们没有使用常规的a标签,而是使用一个自定义组件router-link来创建链接。这使得Vue Router可以在不重新加载页面的情况下更改URL,处理URL的生成以及编码
2、router-view
- router-view 将显示与url 对应的组件,可以把它放在任何地方,以适应的布局
2、javaScript:
案例:
通过app.use(router)可以在任意组件中以this.$router的形式访问路由对象,并且以this.$route的形式访问当前路由
实例:
router-link 属性补充
1、to属性:
通过to属性可以规定路由的跳转地址:
to属性也可以写成绑定属性,那么它所绑定的值就会变成一个对象:
2、replace属性:
设置replace属性的话,当点击时,会调用router.replace()而不是router.push(),导航后不会留下history记录
三、动态路由
1、动态路由匹配---带参数的动态路由匹配
很多时候,需要将给匹配模式的路由映射到同一个组件。例如,我们有一个newsDetail组件,它应该对所有新闻的详情进行渲染,根据新闻ID 的不同,渲染的内容不同。在 Vue Router 中,我们可以在声明路由时,路径中使用一个动态字段来实现,我们称之为 路径参数;
路径参数 用冒号 : 表示。当一个路由被匹配时,它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此,我们可以通过新闻 ID 获取内容。
在获取参数前,先要清楚如何传递参数:
1、静态to属性传参:
2、绑定to属性传参:
3、命名路由params传参(推荐):
注意:params传参要求路由必学是命名路由
在获取参数前,先要清楚如何传递参数:
4、query属性传参(路径中使用?方式传参):
注意:不管是否为命名路由,都可以使用query方式传参
2、.动态路由匹配-响应路由参数的变化
使用带有参数的路由时需要注意的是,当用户从 /users/johnny 导航到 /users/jolyne 时,相同的组件实例将被重复使用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会被调用。
解决办法:
要对同一个组件中参数的变化做出响应的话,你可以简单地 watch $route 对象上的任意属性,在这个场景中,就是 $route.params
四、路由的匹配语法
1、路由的匹配语法-参数自定义正则
根据参数的不同,匹配不同的路由 想象一下,两个路由 /about/:id 和 /about/:name,两者会匹配完全相同的 URL,所以我们需要一种方法来区分它们。可以通过给路由参数定义正则表达式,来严格匹配路由。
注意:1.对于转移字符\ ,必须多加一层 \
2、路由的匹配语法-可重复的参数
如果你需要匹配参数不固定的的路由,可以使用三个符号:
* 0个或多个 + 1个或多个 ? 0个或1个
<router-link>path方式使用:
命名路由params方式使用:
当然,可重复参数的路由也是可以设置正则表达式的:
五、嵌套路由
很多时候,在一个路由下面经常需要嵌套其他的路由,这种情况,就需要嵌套路由来实现;
制作一个嵌套路由的结构;
1、.使用命名路由的方式(推荐):
第一步:制作父页面导航
第二步:定义父组件
第三步:定义路由规则
2.不使用命名路由的方式:
第一步:制作父页面导航
第二步:定义父组件
第三步:定义路由规则
必须有重定向规则,而且Home组件的path是/home,这样,子组件的path才能匹配上;
使用命名路由的方式传递参数!
六、编程式导航
想实现页面之间的跳转,可以通过a标签实现,除此之外,还可以通过js方法window.open、location.href的方式实现。
<router-link>相当于a标签,那么vue-router的跳转方法是什么呢?
$router.push();
当你点击 <router-link> 时,内部会调用这个方法,所以点击 <router-link :to="..."> 相当于调用 $router.push(...)
$router.push()方法的参数:
<router-link>提供了replace属性,编程式导航也提供了此功能:
路由中的前进后退功能(history.go(n)):
七、.重定向
很多时候,需要通过重定向功能来默认显示某一个路由内容;
比如:有两个组件 /home 、 /news , 当访问首页时,默认的根路径为‘/’,这时,就需要通过重定向功能显示/home的内容;
八、路由传参
通过路由传递的参数可以通过$route获取,本章节介绍另外一种获取参数的方式,以增加路由传参的灵活性;
之前的方式:
可以替换成:
通过组件的props属性,可以接收路由传递过来的参数
当 props 设置为 true 时,route.params 将被设置为组件的 props。
九、不同的历史模式
1.Hash 模式
它在内部传递的实际 URL 之前使用了一个哈希字符(#)。由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。不过,它在 SEO 中确实有不好的影响。如果你担心这个问题,可以使用 HTML5 模式。
2.HTML5 历史模式(推荐)
用 createWebHistory() 创建 HTML5 历史模式;
当使用这种历史模式时,URL 会看起来很 "正常",例如 https://example.com/user/id
不过,问题来了。由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id,就会得到一个 404 错误。
要解决这个问题,你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源,它应提供与你的应用程序中的 index.html 相同的页面。