vue路由教程_vue路由有几种方式[通俗易懂]

一、带参数的动态路由匹配

1.路径参数

在 Vue Router 中，在路径中使用一个动态字段来实现，称之为 路径参数 。
路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。

2.响应路由参数的变化

使用带有参数的路由时，相同的组件实例将被重复使用
要对同一个组件中参数的变化做出响应的话，可以简单地 watch $route 对象上的任意属性

 使用 beforeRouteUpdate ，也可以取消导航

 3.捕获所有路由或 404 Not found 路由

匹配任意路径，可以使用自定义的 路径参数 正则表达式

二、路由的匹配语法

1.在参数中自定义正则

两者会匹配完全相同的 URL的参数，在路径中添加一个静态部分来区分它们

 2.可重复的参数

需要匹配具有多个部分的路由，用 *（0 个或多个）和 +（1 个或多个）将参数标记为可重复
得到一个参数数组，并且在使用命名路由时也需要传递一个数组，可以通过在右括号后添加它们与自定义正则结合使用

 3.可选参数

通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选

 4.调试

了解一个路由没有被匹配，或者报告一个 bug，可以使用路径排名工具，可以通过 URL 分享路由。

三、嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，通过 Vue Router，可以使用嵌套路由配置来表达这种关系

 一个被渲染的组件也可以包含自己嵌套的 <router-view>

 要将组件渲染到这个嵌套的 router-view 中，需要在路由中配置 children

 四、编程式导航

1.导航到不同的位置

使用 router.push 方法。会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，会回到之前的 URL，该方法的参数可以是一个字符串路径，或者一个描述地址的对象

 2.替换当前位置

类似于 router.push，但它不会向 history 添加新记录

3.横跨历史

采用一个整数作为参数，表示在历史堆栈中前进或后退多少步

 五、命名路由

可以为任何路由提供 name，有以下优点：

①没有硬编码的 URL

②params 的自动编码/解码。

③防止你在 url 中出现打字错误。

④绕过路径排序（如显示一个）

要链接到一个命名的路由，可以向 router-link 组件的 to 属性传递一个对象

 六、命名视图

可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

 嵌套命名视图

命名用到的嵌套 router-view 组件
UserSettings 组件的 <template> 部分应该是类似下面

今天的文章vue路由教程_vue路由有几种方式[通俗易懂]分享到此就结束了，感谢您的阅读。