Ⅰ 前端路由(二)
前面我们做到了切换路由不发送请求，现在我们要 把路由和组件对应起来达到渲 染。
接下来介绍的是VueRouter的原理，它是怎么做到的这个功能的。其会在 根Vue 上注册2个全局 函数式组件 <router-link> <router-view>，在根Vue原型上 定义$route(当前路由Route对象)和$router(传入newVue的router对象列表)两个属性(所有子Vue实例会继承)。
<router-link>，作为一个子组件，初始化渲染时会去执行render函数，主要做了 其 内部属性 (tab标签,activeClass等)的 处理 ，在点击时会去 执行router.push做url变化 。它不涉及渲染，逻辑比较简单。
执行router.push(replace)做url变化和初始化VueRouter时都会去触发 transitionTo方法做路径切换 。这个方法里做了很多事情，接下来会介绍。它执行完毕的成功回调中会切换url。
最重要的问题是渲染组件 ， <router-view>如何知道去渲染哪个组件 ？我们手头有一个按文档规定写的new VueRouter({ routers })列表,传给了根Vue，VueRouter通过它做了很多事情。
首先在new VueRouter()时,会去执行其构造函数,其中 createMatcher 方法,会递归遍历routers把每个router对象进行重新描述得到 RouteRecord 对象，并由它们得到3个列表( pathList (路由path列表), pathMap (路由path: record列表), nameMap (路由name:record列表))，这3个列表是为导航守卫服务的我们先不管它。createMatcher最后返回2个方法，1、 addRoutes ，动态对上面3个列表修改。2、 match ，根据传入的位置和当前的路径，计算出新的路径为 Route对象。
transitionTo路径切换时，会去执行 match 函数计算新路径Route对象，其有一个属性值 matched ，是从当前RouteRecord向上(parent)查找直到根RouteRecord的到的RouteRecord数组，这样得到一个 层级关系 。我们在<router-view>的render函数中会标志flag表示是router-view组件，我们上(父组件)查找有flag标志就 会把 depth++，最后得到 当前<router-view>的深度 。我们通过 $route.matched [depth]就可以 找到router-view需要去渲染的组件。
这里还有一个问题， 我们怎么知道当前$route是哪个？ 在初始化routerVue，init()中规定了所有子组件的实例的$route属性指向根Vue的$route属性，根Vue的$route属性又等于this._router.history.current。而current这个值又是在路径切换时会变化的。也就是说我们路径变化会把当前$route指为当前组件路由的route路径对象，这个我们不用担心。
概括： 就是做路径切换时，我们会根据我们写的路由表，把当前路由往上到根路由的路由对象组成一个数组，描述一个 层级关系List 。<router-view>是函数式组件，它有标志flag，我们也会从它往上查找<router-view>直到根vue，有就depth++，得到当前<router-view> 层级位置depth 。 List[depth].component就是我们要渲染的组件。
我们知道<router-view>要去渲染哪个组件，它是怎么做到更新视图的？ 更新视图肯定也要符合Vue渲染原理呀，要把1个数据响应式化，get时收集订阅者Watcher并初始化渲染，set时派发更新 把订阅该数据的Watcher重新渲染。这个响应式数据是谁呢？就是定义在根Vue的_route，子Vue的$route也都指向它。<router-view>函数render执行的时候，会去取$route相当于访问根Vue的_route，会触发订阅者Watcher收集并初始化渲染。做路径切换时，会修改_route(即记录当前路由路径的this._router.history.current)。
触发点 ：router-link 提供了"下一个位置参数"，准备去切换url时，触发transitionTo方法去做路径切换。
响应式化数据 ：history.current。记录当前路径Route对象(由当前路由和下一个位置计算出来)，收集订阅者，派发更新渲染，都围绕它进行。
路由配对组件 ：当前路径Route对象(由当前路由和下一个位置 计算出来)和我们写的路由表，得到当前路径Route对象到根路径的 路由路线 数组，<router-view>肯定在这之内，不会比其更深层，所以在这数组之内可以用depth取到。
守卫导航是怎么做到的 ？守卫导航就是transitionTo方法做路径切换时执行的一系列钩子函数。
这些钩子函数 有些定义在全局 ，用 this.router.xxx可以取到。
有些定义在组件内 ，通过前面的Routed.matched，即将离开路由的matched列表和当前路由的matched列表，从头对比到第一个不同，得到 updated (目标RouteRecord和当前RouteRecord相同，前面重复的部分)、 activated( 目标RouteRecord和当前RouteRecord不同，后面不同的部分 ) 、 deactivated( 当前RouteRecord和目标RouteRecord不同，后面不同的部分 ) 三个RouteRecord数组。 通过这些RouteRecord去取定义在组件中的导航守卫 。
有些定义在路由中 ，也通过这些 RouteRecord去取。
到这里就完成了，接下来会分析前端路由在实际开发中的运用，比如页面权限设置！
Ⅱ 前端工程师必问面试题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的理解。
Ⅲ 什么是前端路由
路由从字面上理解就是“由某某路径”，前端的路由指的是设置一个名字，对应页面路径，从而可以通过访问这个名字而访问页面。
满意请采纳！谢谢！
Ⅳ Vue路由守卫详解
正如其名， vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住 参数或查询的改变并不会触发进入/离开的导航守卫 。你可以通过 观察 $route 对象 来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
你可以使用 router.beforeEach 注册一个全局前置守卫：
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中 。
每个守卫方法接收三个参数：
确保要调用 next 方法，否则钩子就不会被 resolved。
在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前， 同时在所有组件内守卫和异步路由组件被解析之后 ，解析守卫就被调用。
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
你可以在路由配置上直接定义 beforeEnter 守卫：
这些守卫与全局前置守卫的方法参数是一样的。
最后，你可以在路由组件内直接定义以下路由导航守卫：
beforeRouteEnter 守卫 不能 访问 this ，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说， this 已经可用了，所以 不支持 传递回调，因为没有必要了。
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
Ⅳ vue的路由守卫
vue的路由守卫，也叫路由钩子、导航守卫或导航钩子。路由（vue-router） 提供的导航守卫主要用来:通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的, 或者组件级的。
使用 router.beforeEach 注册全局的前置路由守卫。
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。
方法接收三个参数：
to: Route ，即将要进入的目标 路由对象
from: Route ，当前导航正要离开的路由
next: Function ，一定要调用该方法来resolve这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在router-link的 to prop或 router.push中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError()注册过的回调。
确保要调用 next方法，否则钩子就不会被 resolved。
使用 router.afterEach 注册全局的后置守卫。
不同于前置守卫的是，后置守卫没有 next 函数，也不会改变导航本身。
这个是vue2.5.0版本新增的。使用 router.beforeReslolve 注册全局的解析守卫。
这和 router.beforeEach 类似，区别在于：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
顾名思义，即单个路由独享的导航钩子，使用 boforeEnter 在路由配置上直接进行注册。
使用方法与全局守卫相同,不同点在于：全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由。
组件内的守卫分为 beforeRouteEnter 、 beforeRouterUpdate 和 beforeRouteLeave 。
在渲染该组件的对应路由被 confirm 前调用。
但是并不意味着在 beforeRouteEnter 中无法访问组件实例，我们可以通过给 next 传入一个回调来访问组件实例。在导航被确认时，会执行这个回调，这时就可以访问组件实例了。
这个方法是vue-router2.2版本加上的。因为原来的版本中，如果一个在两个子路由之间跳转，是不触发beforeRouteLeave的。这会导致某些重置操作，没地方触发。在之前，我们都是用watch 的。但是通过这个钩子，我们有了更好的方式。
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
Ⅵ 什么是"前端路由"什么时候适合使用"前端路由""前端路由"有哪些优点和缺点
你的理解有错误，所谓的前端路由是为了和后端路由区分开。后端路由也叫做二级路由，三级路由！简单举个例子，你在光猫后面插的第一个路由器就叫做前端路由，它主管你连接在这台路由器上的其他所有路由器，也就是二级或者三级路由器，在家用领域这个概念基本不会使用！但在公司或者一些比较大的企业，前端路由器的功能决定你公司的其他电脑的功能，比如带宽，认证，收费等！~
Ⅶ vue的路由守卫有哪些
路由守卫分为以下几种
全局守卫：beforeEach（是路由的钩子函数，在每一个路由跳转之前执行，常做登录权限判断，参数：to，from，next）
后置守卫：afterEach（在跳转之后执行，参数：to，from）
全局解析守卫：beforeResolve（参数：to，from，next。在beforeEach之后，afterEach之前）
路由独享守卫：beforeEnter
组内路由守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave
学习前端知识，推荐了解北京尚学堂，多年前端培训经验、多位优秀国内外老师面对面授课，给你带来最完美的课程体验。
Ⅷ 路由守卫有哪些
vue路由守卫哪几种？
vue中路由守卫一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫。
所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来？总不能随便陌生人就给放进去？要到哪里去？然后保安再告诉你下一步该怎么做？如果你的确是这个房子主人允许进入的人，那就让你进入，否则就要打电话给房子主人，跟房主商量(登录注册)，给你权限。
// 通过这个匹配判断是否有该权限或要求，这个一般作为页面权限设置，比如哪些页面需要登录才能进入，哪些不需要
to.matched.some(res => res.meta.requireAuth)
一、全局路由守卫
所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪个页面去？
console.log(from) => // 从哪个页面来？
next() => // 一个回调函数
}
router.afterEach（to，from） = {}
next()：回调函数参数配置
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项
二、组件路由守卫
// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
next(vm => {})
}
beforeRouteUpdate (to, from, next) {
// 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}
三、路由独享守卫
路由独享守卫是在路由配置页面单独给路由配置的一个守卫
Ⅸ ：前端路由是什么东西
前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。
其实前端路由要做的就是两点：
在页面不刷新的情况下实现url的变化
捕捉url的变化，根据url更改页面内容
Ⅹ vue-router导航守卫之实战篇
官方这么说：
好吧，看不懂，就好（当）好（废）理（话）解（吧）下。其实，导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。
先看一个钩子函数执行后输出的顺序截图吧，一般讲解都会在之后呈现，给大家换种思路（也就是先预习再学习最后复习）
[图片上传失败...(image-b044c6-1632499247491)]
好吧不知道的估计看不懂吧！不过我希望你能看到一个点能多倒回来看看这个顺序，前方干货预警
导航守卫分为 ：全局的、单个路由独享的、组件内的三种。分别来看一下：
【全局的】：是指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数，如下的写法。钩子函数按执行顺序包括beforeEach、beforeResolve（2.5+）、afterEach三个（以下的钩子函数都是按执行顺序讲解的）：
[beforeEach]：在路由跳转前触发，参数包括to,from,next（参数会单独介绍）三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。
[beforeResolve]（2.5+）：这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：
即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。
[afterEach]：和beforeEach相反，他是在路由跳转完成后触发，参数包括to,from没有了next（参数会单独介绍）,他发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫，后讲）之前。
【路由独享的】是指在单个路由配置的时候也可以设置的钩子函数，其位置就是下面示例中的位置，也就是像Foo这样的组件都存在这样的钩子函数。目前他只有一个钩子函数beforeEnter：
[beforeEnter]：和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数to、from、next
【组件内的】：是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate (2.2+)、beforeRouteLeave三个，执行位置如下：
[beforeRouteEnter]：路由进入之前调用，参数包括to，from，next。该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined，也就是他在beforeCreate生命周期前触发。在这个钩子函数中，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过 vm访问组件实例进行赋值等操作，（next中函数的调用在mounted之后：为了确保能对组件实例的完整访问）。
[beforeRouteUpdate] (v 2.2+)：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。参数包括to，from，next。可能有的同学会疑问，what is 路由改变 or what is 组件被复用？
[beforeRouteLeave]：导航离开该组件的对应路由时调用，可以访问组件实例 this ，参数包括to，from，next。
至此，所有钩子函数介绍完毕。
屡一下哈：
全局路由钩子：beforeEach(to,from, next)、beforeResolve(to,from, next)、afterEach(to,from)；
独享路由钩子：beforeEnter(to,from, next)；
组件内路由钩子：beforeRouteEnter(to,from, next)、beforeRouteUpdate(to,from, next)、beforeRouteLeave(to,from, next)
不知道你是否还记得to、from、next这三个参数
下面请重头把这几个钩子函数的参数看一遍，细心的同学可以看见在afterEach钩子中参数没有next，为什么呢？
to：目标路由对象；
from：即将要离开的路由对象；
next：他是最重要的一个参数，他相当于佛珠的线，把一个一个珠子逐个串起来。以下注意点务必牢记：
1.但凡涉及到有next参数的钩子，必须调用next() 才能继续往下执行下一个钩子，否则路由跳转等会停止。
2.如果要中断当前的导航要调用next(false)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。（主要用于登录验证不通过的处理）
3.当然next可以这样使用，next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。意思是当前的导航被中断，然后进行一个新的导航。可传递的参数与 router.push 中选项一致。
4.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子。
5.next(error): (v2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 [router.onError()](https://link.hu.com/?target=https%3A//router.vuejs.org/zh-cn/api/router-instance.html%23%25E6%2596%25B9%25E6%25B3%2595) 注册过的回调。
好了，还记得那个截图吗，我们再看一遍
[图片上传失败...(image-940ea2-1632499247491)]
我们最后屡一下顺序：
当点击切换路由时：beforeRouterLeave-->beforeEach-->beforeEnter-->beforeRouteEnter-->beforeResolve-->afterEach-->beforeCreate-->created-->beforeMount-->mounted-->beforeRouteEnter的next的回调
当路由更新时：beforeRouteUpdate