随着家庭设备的增多，路由器的管理变得越来越重要。本文vue路由事件将为您介绍如何正确设置路由器，保障网络安全。

本文目录一览：

• 1、vue两种路由模式及原理
• 2、vue中路由模式及区别
• 3、Vue路由复用问题解决
• 4、vue-router动态路由添加及路由刷新后消失的解决办法
• 5、vue-router路由跳转原理
• 6、vue动态路由

vue两种路由模式及原理

Hash： 使用URL的hash值来作为路由。支持所有浏览器。History： 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 Abstract： 支持所有javascript运行模式。

在单页面中，路由描述的是URL和UI之间的单向映射关系，即URL的变化引起UI的更新，不需要刷新。

window.location.hash和window.history.pushState(或replaceState)唯一的不同是通过hash改变url带入#，而后者不会。

hash与history 对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。

突发奇想，vue-router做单页面应用的时候是如何保证路由跳转的呢？源码中有两种模式，一种的history模式，另一种是hash模式。

vue中路由模式及区别

1、Hash和History两种路由模式的区别 最明显的区别就是在地址栏中的#号，history模式下#会消失，hash不会。

2、这个也是登录页面路由跳转的常用方式之一，这个也是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3、hash与history 对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。

4、：hash 模式下，仅hash符号之前的内容会被包含在请求中，如 http：// ，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。2：history模式下，前端的URL必须和实际向后端发起请求的URL一致。

5、如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。

Vue路由复用问题解决

1、在Vue中切换路径时，如果下一个路由与当前页面共用同一个组件，Vue会复用当前组件，不会重新创建一个。这就导致组件的生命周期函数如mounted， created等不会被触发，页面看起来就像什么都没发生一样。

2、那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。一个“路径参数”使用冒号 ： 标记。

3、最近在用vue-cli4 ， vue0开发项目时，遇到了路由跳转时当点击同一个路由地址时就会报错，另一个问题就是路由跳转后记住了上一次页面的滚动条的位置，未回滚到顶部。

4、使用router-view时，如果在相同路由之间跳转，默认在跳转路由时会采用缓存策略，并不会刷新当前路由组件。即mounted，beforeDestory等钩子函数并不会触发。vue 同一路由跳转不走生命周期，导致数据不更新。使用watch 监听路由变化。

5、目前在使用VUEX开发，发现加载动态路由的话，由于刷新页面就会重新加载VUEX，故会丢失已存在的state，但是又不想localStorage，sessionStorage。

6、当通过URL方式跳转到其他页面时，Vue会重新加载整个页面并初始化数据，这可能导致之前已经加载的数据被清空。为了避免这种问题，可以考虑使用Vue Router提供的路由导航守卫（Navigation Guards）来管理路由跳转。

vue-router动态路由添加及路由刷新后消失的解决办法

目前在使用VUEX开发，发现加载动态路由的话，由于刷新页面就会重新加载VUEX，故会丢失已存在的state，但是又不想localStorage，sessionStorage。

以上两种方式是可以解决页面刷新参数消失问题的，query这种方式可以理解为是ajax中的get方法，参数是直接在url后面添加的，参数是可见的。

使用vue cli创建一个webpack工程 加入vue-router然后使用路由引入一个新的组件。

针对前端使用vue框架的情况，对页面一级的权限控制，常规处理是在页面导航栏通过控制导航显隐控制权限，但在浏览器地址栏输入访问路径依然可以访问，可以用vue-router的动态路由来实现权限控制。

问号后的参数全部缺失，导致页面报错。解决方案如下：在router文件中，使用beforeEach函数，本地保存首次页面进入时的query：menu.vue中添加select钩子函数做router处理：修改后测试，问题完美解决。全部路由切换都带query参数。

vue-router路由跳转原理

首先vue-router实现了 在无需刷新页面的情况下更新视图 对比：location.href=实现了跳转但是刷新了页面 在浏览器环境下的两种方式，分别就是在HTML5History，HashHistory两个类中实现的。

优点：此方式，可以把sessionStorage 中的token一起带过去。缺点：在新标签页和旧标签页，组件之间方法调用会失效 只要将vue-router和windwow.open结合就好了。原理很简单，获取到需要跳转的地址，再把地址传递给window.open。

router-link的to属性 这是一个必须设置的属性，否则路由无法生效。它表示路由的链接，可以是一个字符串也可以是一个描述目标位置的对象。

两种方式的优劣 第一种方式比较简单直接，而且代码较容易维护 第二种路由守卫的方式虽然可以解决问题单有点杀鸡用牛刀的意味了，针对你的需求，从代码维护角度考虑，有点成本。

vue动态路由

1、vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。

2、一般路由是在 router/index.js 里面设置的，这样我们有了一套固定的路由。但是有的时候我们需要在运行时可以动态设置一些路由，最常见的就是后台管理。用户登录后，根据用户的角色、权限，加载对应的路由。

3、keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

4、比如我们进入到用户界面时，希望是如下的路径：- /user/aaa 或者 user/bbb 。

5、权限控制是后台管理系统比较常见的需求，如果我们需要对某些页面的添加权限控制的话，那我们可以在路由管理中的权限做一些校验，没有通过权限校验的给出相应的提示或者直接跳转到报错页面。

在网络时代，我们需要掌握网络技巧，才能更好地适应这个时代。希望本文所介绍的路由器设置和WIFI技巧可以对你有所启发。