vue路由的几种方式

本篇文章给大家谈谈关于vue路由总结你必看，以及vue路由的几种方式对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、vue-router 方法总结

2、Vue的两种路由模式

3、Vue动态路由

4、Vue实现动态路由

vue-router 方法总结

全局守卫 ：beforeEach（登录拦截）、afterEach

路由独享守卫 ：beforeEnter（部分路由的登录拦截）

组件内守卫 ：beforeRouteEnter（权限管理）、beforeRouteUpdate、beforeRouteLeave

路由全局解析守卫 ：beforeResolve（这里根据单页面name的指向不同，去访问的接口域名也不同）

beforeRouteLeave :路由组件的组件离开路由前钩子，可取消路由离开。

beforeEach : 路由全局前置守卫，可用于登录验证、全局路由loading等。

beforeEnter : 路由独享守卫

beforeRouteEnter : 路由的组件进入路由前钩子。

beforeResolve :路由全局解析守卫

afterEach :路由全局后置钩子

beforeCreate :组件生命周期，不能访问this。

created :组件生命周期，可以访问this，不能访问dom。

beforeMount :组件生命周期

deactivated : 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。

mounted :访问/操作dom。

activated :进入缓存组件，进入a的嵌套子组件(如果有的话)。

执行 beforeRouteEnter 回调函数next。

Vue的两种路由模式

在vue-router路由对象中，路由有两种模式：hash和history，而默认的是hash模式.

因为hash发生变化的url都会被浏览器记录下来，从而会发现浏览器的前进后退都可以用

修改历史状态

包括了pushState,replaceState两个方法，这两个方法接受三个参数：stateObj,title,url

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象.

history 模式的补充

对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也真是称之为单页面的原因，而vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。而当开启history模式的时候，如果后端不进行任何处理，在Dev阶段一切都是正常的，可是打包之后，访问路径则会返回404，因此要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是app 依赖的页面。

Vue动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params ，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

你可以看看这个 在线例子 。

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

除了 $route.params 外， $route 对象还提供了其它有用的信息，例如， $route.query (如果 URL 中有查询参数)、 $route.hash 等等。你可以查看 API 文档 的详细说明。

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar ， 原来的组件实例会被复用 。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着组件的生命周期钩子不会再被调用 。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫 ：

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配 任意路径 ，我们可以使用通配符 ( * )：

当使用 通配符 路由时，请确保路由的顺序是正确的，也就是说含有 通配符 的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了 History 模式 ，请确保 正确配置你的服务器 。

当使用一个 通配符 时， $route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过 通配符 被匹配的部分：

vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类匹配。

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到 动态路由 的设置了。

动态路由设置一般有两种 ：

(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用

到这里，整个动态路由就可以走通了，但是页面跳转、路由守卫处理是异步的，会存在动态路由添加后跳转的是空白页面，这是因为路由在执行next()时，router里面的数据还不存在，此时，你可以通过window.location.reload()来刷新路由

后端返回的路由格式：

注意： vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。关于vue页面刷新保存页面状态，可以查看 vue如何在页面刷新时保留状态信息

关于vue路由总结你必看的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue路由的几种方式、关于vue路由总结你必看的信息别忘了在本站进行查找喔。