Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
打开项目终端，通过npm安装
在项目中src目录想创建Router文件夹，新建index.js文件，在这个文件下配置路由：
直接输入对应的路径，显示对应的组件，到此路由的基本模型已经做好了
- 重定向也是通过 routes 配置redirect来完成，下面例子是从 /home 重定向到 /：
- 重定向的目标也可以是一个命名的路由：（路由通过name来命名）
- 常规参数只匹配url片段之间的字符，用 / 分割。如果我们想匹配任意路径，我们可以自定义的路径参数正则表达式，在路径参数后面的括号中加入 正则表达式：
- 别名用alias属性表示，当url匹配到别名/abc，也会跳转到组件center中去
通过a标签跳转
- to跳转到对应的路由，不需要加#号
- 不过标签会带a标签的样式，底部会有个下划线不太好看，后面我们也可以通过$route.push跳转的方法
- 通过active-class="kerwin"来命名，使选中的显示高亮
如图所示：
一个路由组件下面，再嵌套路由，要将组件渲染到这个嵌套的 router-view 中，我们需要在路由中配置 children：
- router 指代路由器实例。在组件内部，你可以使用 属性访问路由，例如
。如果使用组合式 API，你可以通过调用 来访问路由器。
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
- 替换当前位置
直接在传递给 router.push 的 to 参数中增加一个属性 replace: true ：
- 横跨历史
该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。
很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：
路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：
要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是：
或者，使用 beforeRouteUpdate 导航守卫，它还允许你取消导航：
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。
你可以使用 router.beforeEach 注册一个全局前置守卫：
每个守卫方法接收两个参数：
- to: 即将要进入的目标 用一种标准化的方式
- from: 当前导航正要离开的路由 用一种标准化的方式
可以返回的值如下:
- false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- 一个路由地址: 通过一个路由地址重定向到一个不同的地址，如同调用 router.push()，且可以传入诸如 replace: true 或 name: ‘home’ 之类的选项。它会中断当前的导航，同时用相同的 from 创建一个新导航。
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
- 它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
你可以为路由组件添加以下配置：
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
- 这个 离开守卫 通常用来预防用户在还未保存修改前突然离开。该导航可以通过返回 false 来取消。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/34886.html