vue路由模式
路由器设置和无线WIFI设置可能因为网络环境和设备类型而有所差异，本文vue路由模式将为您提供适用于不同情况的设置方法和技巧。
本文内容目录一览：
vue路由hash和history
SPA ，即 单页面应用 (Single Page Application)。就是只有一张 web页面的应用。单页应用程序 (SPA) 是加载单个html页面并在 用户与应用程序交互时 动态更新该页面的web应用程序。浏览器一开始会加载必需的html、css和 js ，所有的操作都在这张页面上完成，都由js来控制
对于现代开发的项目来说，稍微复杂一点的SPA，都需要用到 路由 。而 vue-roter 正是 vue 的路由标配，且 vue-router 有 两种模式 ： hash 和 history 。
hash 模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 onhashchange 事件。
下面用一个网址来演示以上属性：
history API 是 H5 提供的新特性，允许开发者 直接更改前端路由 ，即更新浏览器 URL 地址而 不重新发起请求 。
hash 与 history 在浏览器下刷新时的区别：
正常页面浏览
改造H5 history模式
HTML5新增的API：
主要有以下特点：
对于 history 来说，确实解决了不少 hash 存在的问题，但是也带来了新的问题：
在实际的项目中，如何对这两者进行选择：
vue 路由四种方式 (带参数)跳转
replace和push区别：
router.push(location) 会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。
router.replace(location) ，replace 属性（默认值: false），它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
注意：获取路由上面的参数，用的是$route，后面没有r
params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失。
两者都可以传递参数，区别是什么？
query 传参配置的是path，而params传参配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传参刷新会无效，但是query会保存传递过来的值，刷新不变
vue中路由模式及区别
路由模式默认三种
1.Hash: 使用URL的hash值来作为路由。支持所有浏览器。
2.History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
3.Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。
Hash和History两种路由模式的区别
最明显的区别就是在地址栏中的#号，history模式下#会消失，hash不会。
相同点:
1.当URL改变时，页面不会重新加载;
2.都受页面导航回退前进等影响;
不同点:
1.hash模式背后的原理是onhashchange事件，可以在window对象上监听事件。
2.如果后台没有做相应配置,history页面会在再次刷新的时候,报404;hash则不会出现404报错
3.当改变url时，hash不会请求服务器，history会请求服务器。
当使用vue路由模式history时，进行刷新报错404，解决办法？
1.与后端配合，再刷新时返回首页
2.在Vue应用里面写出一个覆盖全局的方法和一个404页面。
原文链接：
前端工程师必问面试题？vue路由模式？路由守卫？
vue的路由模式一共有两种，分别是哈希和history，他们的区别是hash模式不会包含在http请求当中，并且hash不会重新加载页面，而使用history模式的话，如果前端的url和后端发起请求的url不一致的话，会报404错误，所以history的原理是利用html5新增的两个特性方法，分别是psuhState和replaceState来完成的，以上就是对vue路由的理解。
路由的导航守卫 又叫做路由的钩子函数（生命周期函数）
就是在跳转页面的时候把路由栏下来，做一些操作在放行，vue一共提供了三种路由守卫。
第一种是全局守卫
beforeEach路由进入之前
afterEach路由进入之后
第二种 组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前
第三种 路由独享守卫
beforeEnter 路由进入之前
分别是 to from next
next 这个参数 在路由3.x版本的时候，是必须的
但是到了路由4.x版本的时候next参数变成可选的了
一般来说vue2搭配 3.x的路由
vue3搭配 4.x 的路由
比如说购物车页面只有登陆的才能访问，我们可以用组件级守卫购物车页面，如果已经登陆存有token 的话，就继续访问这个页面，如果没有登陆的话就会跳转到登陆页面。
在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权. ⽐如:当⽤户登录之后,我们会把后台返回的token以及⽤户信息保存到vuex
和本地,当⻚⾯进⾏跳转的时候,我们会在路由守卫⾥⾯获取vuex⾥⾯的token,如果token存在的话,我们则使⽤next让他进⼊要
跳转的⻚⾯,如果token不存在的话我们使⽤next⽅法让他回到登录⻚
以上就是我对vue路由守卫的理解。
⾸先v-if和v-show都是控制元素的显示与隐藏, 不过v-if控制元素的显
示和隐藏的时候会删除对⽤的dom元素,当每⼀个显示的时候,都会重新创建dom和渲染. ⽽v-show则是通过css的display:none
和display:block来控制元素的显示与隐藏. v-if⽐较耗费性能,所以我们涉及到频繁的显示隐藏操作我们建议使⽤v-show,如果不
是频繁操作的话,我们可以v-if
在项⽬中我会经常使⽤v-if和v-show,⽐如我们在搜索功能的时候,他有⼀个历史记录,这个时候我们根据是否有搜索的结果来判
断历史记录的显示与隐藏,这块我就可以使⽤v-if ,当然⽤v-show也可以. 以上就是我对v-if和v-show的理解。
v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.
v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯)。
⾸先呢,methods是⽤来定义⽅法的区域,methods定义的⽅法需要调⽤才能触发. 不具备缓存⾏
⽽computed是计算属性,他依赖于属性值的变化,当属性发⽣改变的时候,计算属性⾥⾯定义的⽅法就会触发,computed具有缓
存性,依赖属性值的变化⽽变化.
⽽watch主要是⽤于监听,不具备被缓存性.依赖于数据变化⽽触发.
在项⽬中,⽐如我们获取state的状态的时候我们会把它放到computed⾥⾯,或者在写购物⻋数量计算的时候也会使⽤计算属性.
⽽watch也在项⽬经常使⽤,⽐如我们封装编辑 和 新增弹窗组件的时候会通过watch来进⾏id判断我们要显否要清空表单的数
据.
以上就是我对computed和watch的理解。
了解如何设置和优化路由器和WiFi网络是非常重要的，这可以让你在工作和娱乐中获得更好的网络体验。
