vue中的路由
本文将为您介绍vue中的路由的相关知识和应用，让您更好地了解和掌握相关技能。
本文内容目录一览：
- 1、vue两种路由模式及原理
- 2、vue路由,二级路由及跳转
- 3、Vue动态路由
- 4、vue中路由模式及区别
vue两种路由模式及原理
1、Hash： 使用URL的hash值来作为路由。支持所有浏览器。History： 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 Abstract： 支持所有javascript运行模式。
2、在单页面中，路由描述的是URL和UI之间的单向映射关系，即URL的变化引起UI的更新，不需要刷新。
3、window.location.hash和window.history.pushState(或replaceState)唯一的不同是通过hash改变url带入#，而后者不会。
4、vue路由的两种模式，hash与history 对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。
5、突发奇想，vue-router做单页面应用的时候是如何保证路由跳转的呢？源码中有两种模式，一种的history模式，另一种是hash模式。
6、对于现代开发的项目来说，稍微复杂一点的SPA，都需要用到 路由 。而 vue-roter 正是 vue 的路由标配，且 vue-router 有 两种模式 ： hash 和 history 。
vue路由,二级路由及跳转
路由demo示例 路由的跳转 router-link是一个组件，默认被渲染成一个带有链接的a标签，通过to属性指定链接地址。
注意：获取路由上面的参数，用的是$route，后面没有r params是路由的一部分，必须要有。query是拼接在url后面的参数，没有也没关系。
电脑做手动IP或者将IP地址用DHCP静态固定起来，根据这个IP地址在第二路由里面设定映射对电脑的IP地址。最后做成就是外网IP地址——路由1映射路由2——路由2映射电脑——电脑。
使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略，并不会刷新当前路由组件。即mounted，beforeDestory等钩子函数并不会触发。vue 同一路由跳转不走生命周期，导致数据不更新。使用watch 监听路由变化。
当通过URL方式跳转到其他页面时，Vue会重新加载整个页面并初始化数据，这可能导致之前已经加载的数据被清空。为了避免这种问题，可以考虑使用Vue Router提供的路由导航守卫（Navigation Guards）来管理路由跳转。
Vue动态路由
1、(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置 (2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。
2、那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。一个“路径参数”使用冒号 ： 标记。
3、vue由静态路由改为动态路由时，出现下面的错误 静态路由懒加载，当我们把router写死import()里面它是正常加载的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错。
4、权限控制是后台管理系统比较常见的需求，如果我们需要对某些页面的添加权限控制的话，那我们可以在路由管理中的权限做一些校验，没有通过权限校验的给出相应的提示或者直接跳转到报错页面。
5、keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
vue中路由模式及区别
vue路由的两种模式，hash与history 对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。
在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。
说到hash和history的区别，最直观的就是在url中， hash带了#，history没有# ，它们两个是路由配置mode的两个选项。前端路由的核心是在 改变视图的同时不会向后端发出请求 ，浏览器提供的这两种支持就是为了达到这一目的。
对于现代开发的项目来说，稍微复杂一点的SPA，都需要用到 路由 。而 vue-roter 正是 vue 的路由标配，且 vue-router 有 两种模式 ： hash 和 history 。
我们希望这些技巧和建议对您设置和使用路由器有所帮助。
