VUE --- 路由基础

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 相同的页面。