Vue路由这么玩，让你的网页嗖嗖跳转（vue 页面路由）

个人主页：Frontend Aoyama

专栏系列：vue篇

人们最终会沉迷于年轻时所没有的东西。

它仍然是绿色的，但此问题显示了Vue 列：Vue-routing。

目录

路由

1.Vue-Router如何实现延迟加载

2. 路由hash和history模式的区别

1. 哈希模式

2.历史模式

3、两种模式对比

3. 如何获取页面哈希变化

4.$route和$router的区别

5. 如何定义动态路由？如何获取传递的动态参数？

6.在生命周期中物化Vue-router路由钩子

7、Vue-router跳转和location.href有什么区别

8. 参数和查询的区别

9.Vue-router的导航守卫是什么？

10.了解前端路由

路由

1. Vue-Router 的懒加载如何实现

非延迟加载：

importListfrom\’@/components/list.vue\’

构造函数=newVueRouter({

路线：[

{路径：\’/list\’，组件：列表}

]

})

复制代码

（1）方案一（常用）：使用箭头函数+导入动态加载

constList=()=import(\’@/components/list.vue\’)

构造函数=newVueRouter({

路线：[

{路径：\’/list\’，组件：列表}

]

})

复制代码

（2）方案二：使用箭头函数，需要动态加载

构造函数=newRouter({

路线：[

{

路径：\’/列表\’,

Component:resolve=require([\’@/components/list\’],resolve)

}

]

})

复制代码

（3）方案三：还可以利用webpack的require.ensure技术来实现按需加载。 在这种情况下，指定相同chunkName 的多个路由将被合并并打包到一个js 文件中。

//r 已解析

constList=r=require.ensure([],()=r(require(\’@/components/list\’)),\’list\’);

//路由也是按照通常的方式写的。这是官方推荐的写法，分为模块进行延迟加载。

构造函数=newRouter({

路线：[

{

路径：\’/列表\’,

组件：列表，

name:\’列表\’

}

]

}））

复制代码

2. 路由的hash和history模式的区别

Vue-Router 有两种模式：哈希模式和历史模式。默认路由模式是hash模式。

1. hash模式

简介：哈希模式是开发时默认的模式（例如www.abc.com/#/vue）。它的哈希值为#/vue。

特点：哈希值在URL中可见，但在HTTP请求中不可见，对后端没有影响。因此，更改哈希值不会重新加载页面。浏览器对这种模式的支持非常好，以前版本的IE浏览器也支持这种模式。哈希路由又称为前端路由，是SPA（单页应用程序）的标准配置。

原理：hash模式的主要原理是onhashchange()事件。

window.onhashchange=函数（事件）{

console.log(event.oldURL,event.newURL);

lethash=location.hash.slice(1);

}

复制代码

使用onhashchange()事件的好处是，当页面的hash值发生变化时，不需要向后端发起请求，windows就可以监听事件变化并根据规则加载相应的代码。另外，浏览器会记录哈希值变化对应的URL，从而允许浏览器在页面内来回移动。不需要后端服务器，但页面的哈希值与相应的URL 相关联。

2. history模式

摘要：历史模式URL 缺少#。采用传统的路由分发模式。也就是说，当用户输入一个URL时，服务器接收请求，解析该URL，并执行相应的逻辑操作。 功能：使用历史模式时，URL 如下所示：abc.com/user/id。看起来比哈希模式更好。但历史模式需要后台配置支持。如果背景设置不正确，访问时会返回404。 API：历史API可分为两部分：切换历史状态和更改历史状态。

历史状态更改：HTML5 历史界面包括新的PushState() 和ReplaceState() 方法。这两个方法适用于浏览器的历史堆栈，提供修改历史记录的能力。但是，如果进行更改，URL 会发生变化，但浏览器不会立即将请求发送到后端。如果想在不刷新页面的情况下更改URL，则需要在前端使用这两个API。

切换历史状态：包含forward()、back()、go()三个方法，分别对应浏览器中的前进、后退、跳转操作。

然而，历史模式丢弃了丑陋的#。然而，它也有其自身的缺点。这意味着当你刷新页面时，如果没有相应的路由或资源，你会看到404。

如果切换到历史模式，需要配置以下内容（还需要配置后端）：

构造函数=newVueRouter({

mode:\’历史\’,

路线：[.]

})

复制代码

3. 两种模式对比

相比直接修改hash，调用history.pushState()有以下优点：

PushState() 设置的新URL 可以是与当前URL 具有相同来源的任何URL。您只能更改# 后面的哈希值，因此只能为与当前URL 相同的文档设置URL。

PushState() 设置的新URL 可以与当前URL 完全相同，并将记录添加到堆栈中。要触发添加记录的操作，哈希设置的新值必须与原始值不同。堆。

PushState()可以通过stateObject参数向记录中添加任意类型的数据，而hash只能添加短字符串。

PushState() 还可以设置一个title 属性以供以后使用。

在哈希模式下，请求中仅包含哈希符号之前的URL。如果后端没有完全覆盖路线，历史模式不会返回404错误。前端URL 必须相同。如果实际发送到后端的URL匹配，如果没有相应的路由处理，将会返回404错误。

哈希模式和历史模式各有优缺点，应根据实际情况使用。

3. 如何获取页面的hash变化

(1)监控$route变化

//当路由改变时监听并执行

时钟：{

$route:{

handler:函数（val，oldVal）{

控制台.log(val);

},

//深度观察和监控

深： 真实

}

},

复制代码

（2）window.location.hash读取#value 通过读写window.location.hash的值，可以判断状态是否发生变化，而无需重新加载网页。

4. $route 和$router 的区别

$route 是一个“路由信息对象”，包含路径、参数、散列、查询、完整路径、匹配、名称和其他路由信息参数。

$router是一个“路由实例”对象，包含路由跳转方法、钩子函数等。

5. 如何定义动态路由？如何获取传过来的动态参数？

(1)参数方法

配置路由格式：/router/:id

传递方式：按照对应值的路径

经过/router/123后形成的路径

1）路由定义

//在APP.vue中

router-link:to=\’\’/user/\’+userId\’替换user/router-link

//在index.js中

{

路径：\’/user/:用户ID\’,

组件：个用户，

},

复制代码

2）路由跳转

//方法一：

router-link:to=\'{name:\’users\’,params:{uname:wade}}\’ 按钮/路由器链接

//方法2：

this.$router.push({name:\’users\’,params:{uname:wade}})

//方法3：

this.$router.push(\’/user/\’+wade)

复制代码

3）获取参数：获取通过$route.params.userid传递的值。

(2)查询方法

配置路由格式：/router.这是正常配置。

传递方式：使用对象中的查询键作为传递方式。

经过/route?id=123后形成的路径

1）路由定义

//方法一：直接以对象形式获取路由器链路标签

router-link:to=\'{path:\’/profile\’,query:{name:\’why\’,age:28,height:188}}\’配置文件/路由器链接

//方法二：以点击事件的形式写成按钮

按钮@click=\’profileClick\’my/button

个人资料点击(){

这个。$router.push({

路径：\’/配置文件\’,

查询：{

name:\’科比\’,

年龄：\’28\’,

身高：198

}

});

}

复制代码

2）如何跳跃

//方法一：

router-link:to=\'{name:\’users\’,query:{uname:james}}\’ 按钮/路由器链接

//方法2：

this.$router.push({name:\’users\’,query:{uname:james}})

//方法3：

router-link:to=\'{path:\’/user\’,query:{uname:james}}\’ 按钮/路由器链接

//方法4：

this.$router.push({path:\’/user\’,query:{uname:james}})

//方法5：

this.$router.push(\’/user?uname=\’+jsmes)

复制代码

3）获取参数

获取通过$route.query 传递的值

复制代码

6. Vue-router 路由钩子在生命周期的体现

1.Vue-Router导航卫士

在某些情况下，您可能需要通过路由来执行一些操作，例如最常见的登录权限验证。如果不满足条件，则允许用户进入导航。进入登录页面并登录。 有很多方法可以为此嵌入路线导航过程：全局、针对单个路线或在组件级别。

全局路由钩子

vue-router 在全局范围内具有三个路由钩子。

router.before 进入路由之前每个全局前卫

router.beforeResolve 全局解析防护（自2.5.0 起）在beforeRouteEnter 被调用之后被调用

每个全局post钩子进入router.after路由后

具体用途：

beforeEach（判断是否登录，如果没有则跳转到登录页面）

router.beforeEach((到，来自，下一个)={

letifInfo=Vue.prototype.$common.getSession(\’userData\’);//存储信息，用于判断是否登录

如果（！ifInfo）{

//sessionStorage不存储用户信息

if(to.path==\’/\’){

//对于登录页面路径，只需next()

下一个（）;

}除此之外{

//否则跳转到登录

Message.warning(\’请重新登录！\’);

window.location.href=Vue.prototype.$loginUrl;

}

}除此之外{

返回下一个（）；

}

})

复制代码

afterEach（滚动条跳转后返回顶部）

router.afterEach((到，来自)={

//滚动条跳转后返回顶部

window.scrollTo(0,0);

});

复制代码

仅单路由钩子

如果您不想全局设置beforeEnter 守卫，您可以为特定路由单独设置守卫。它具有三个参数：to、from 和next。

导出默认[

{

路径：\’/\’,

name:\’登录\’,

组件：登录，

beforeEnter:(到，从，下一个)={

console.log(\’尝试进入登录页面\’)

下一个（）

}

}

]

复制代码

组件内钩子

路由更新之前、路由进入之前、路由离开之前

这三个钩子有三个参数：to、from 和next。

beforeRouteEnter：进入组件之前触发。

beforeRouteUpdate：当当前地址发生变化且组件被复用时触发。例如，如果带有动态参数的路径foo/:id 在/foo/1 和/foo/2 之间跳转，则此钩子将呈现相同的效果。在这种情况下被称为

beforeRouteLeave：离开组件被调用

请注意，它在beforeRouteEnter 组件中无法访问，因为在执行守卫之前不会创建组件实例。您需要将回调传递给next 才能访问它。

beforeRouteEnter(到，来自，下一个){

下一个（目标={

if(from.path==\’/classProcess\’){

target.isFromProcess=true

}

})

}

复制代码

2. 在生命周期函数中体现Vue路由钩子

完成路线导航解析流程（不包括其他生命周期）

触发进入其他路由。

要离开路由，请在RouteLeave 之前调用组件守卫。

调用前卫：beforeEach

对重用组件调用beforeRouteUpdate

Enter 之前调用root 独占防护。

解决异步路由组件。

在你要进入的路由组件中的RouteEnter之前调用

在Resolve 之前调用全局解析守卫

导航已确认。

调用全局post 钩子的afterEach 钩子。

触发DOM 更新（已安装）。

BeforeRouteEnter 执行传递给守卫中下一个的回调函数。

触发钩子的完整序列

假设组件b 第一次离开组件a 并进入组件b，则组合路由导航、保活和组件生命周期钩子触发序列。

beforeRouteLeave：在路由组件的组件离开路由之前进行钩子。这允许您取消路线出发。

beforeEach：路由全局前卫，可用于登录验证、加载全局路由等。

beforeEnter：仅限root 的防护

beforeRouteEnter：路由组件的组件在路由之前进入钩子。

beforeResolve：路由全局解析守卫

afterEach：路由全局后挂接

beforeCreate：组件生命周期不可访问。

创建了；组件生命周期，tAis可访问，但dom不可访问。

beforeMount：组件生命周期

停用：让缓存组件a保持原样，或者触发a的beforeDestroy和destroyed组件销毁钩子。

Mounted：访问/操作dom。

激活：填充缓存组件并填充其嵌套子组件（如果有）。

接下来，运行beforeRouteEnter 回调函数。

导航完成的整个过程都会触发导航行为。

触发了导航行为，但此时未观察到导航。

在停用的组件中，在RouteLeave 之前调用Leave Guard。

在每个守卫之前调用全局。

在重用组件上调用beforeRouteUpdate 守卫（2.2 及更高版本）。

在路由配置中调用beforeEnteY。

解决异步路由组件（如果有）。

在激活的组件中，调用beforeRouteEnter。

调用全局beforeResolve 保护（2.5+）来标记解析阶段的完成。

导航已确认。

调用全局afterEach 钩子。

不可重复使用的组件。开始组件实例的生命周期：beforeCreatecreated、beforeMountmounted

触发DOM 更新。

使用创建的实例调用传递给beforeRouteEnter 守卫中的next 的回调函数。

导航完成

7. Vue-router跳转和location.href有什么区别

使用location.href=/url进行跳转。这样简单方便，但是会刷新页面。

使用History.pushState(/url)，无页面刷新，静态跳转。

部署一个router，使用router.push(/url)进行跳转，使用diff算法实现按需加载，减少DOM消耗。其实使用router跳转和使用history.pushState()没有什么区别。因为vue-router使用history.pushState()，特别是在history模式下。

8. params和query的区别

用法：查询必须通过路径引入，参数必须通过名称引入。接收到的参数是this.$route.query.name 和this.$route.params.name。

显示URL地址：query类似于ajax get参数，params类似于post。简单来说，前者在浏览器地址栏中显示参数，而后者则不显示。

注意：刷新查询时，params 中的数据不会丢失。

9. Vue-router 导航守卫有哪些

全局前缀/挂钩：beforeEach、beforeResolve、afterEach

仅根守卫：beforeEnter

组件中的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

10. 对前端路由的理解

在前端技术的早期，URL 对应于页面。从页面A切换到页面B必然需要页面刷新。这段经历并不好，不过是一开始的无奈之举。 —— 用户只有刷新页面才能再次请求数据。

然后进行了更改，引入了——Ajax，允许在不刷新页面的情况下发起请求。我还需要“更新页面内容而不刷新页面”。正是在这样的背景下，SPA（单页应用程序）应运而生。

SPA 极大地改善了用户体验，允许您在不刷新页面的情况下更新页面内容，并使内容之间的转换更加流畅。但SPA刚推出时，没有考虑“定位”的问题，切换内容前后页面的URL是一样的，导致了以下两个问题。

事实上，SPA 并不知道“当前页面已经走了多远”。在站点内重复“转发”后，某些内容最终可能会被调用，但只要此时刷新页面，所有内容都会被清除，并且您需要在内容之前重复之前的操作，然后才能更改位置。 ——SPA 您的行为不会被“记住”。

这对SEO 不够友好，因为只有一个URL 映射页面，搜索引擎无法收集全面的信息。

前端路由就是为了解决这个问题而引入的。

前端路由可以帮助用户“记住”当只有一页时他们采取了哪些步骤。 —— 匹配SPA 中每个视图的唯一标识符。这意味着由用户的来回移动触发的新内容将被映射到不同的URL。如果此时刷新页面，您不会丢失任何内容，因为您可以通过当前URL 找到它。

那么如何才能实现这个目标呢？首先我们需要解决两个问题：

当用户刷新页面时，浏览器默认会根据当前URL重新定位资源（发送请求）。 SPA 不需要执行此操作，因为它们是单页面并且只有一个与其关联的资源。此时，如果进行正常的请求/刷新处理，则不会记录用户之前和之前的操作。

对于服务器来说，单页应用程序只是一组URL 和资源。那么我们如何使用“不同的URL”来映射不同视图中的内容呢？

鉴于这两个问题，服务器根本无法保存这种情况。所以你必须依靠前端才能自给自足。如果不是，你怎么称呼它为“前端路由”？作为前端，我们可以提供以下解决方案：

拦截用户更新操作，防止服务器盲目响应，返回不符合预期的资源内容。将更新操作完全合并并消化到您的前端逻辑中。

检测URL 更改。这并不是要更改URL 或凭空创建N 个URL。相反，该URL 仍然是相同的URL，但您可以对其进行一些小操作。这些操作不会影响URL 本身的性质或服务器如何识别它。结尾。一旦识别，根据变化使用

JS 去给它生成不同的内容。

#以上关于Vue路由这么玩，让你的网页嗖嗖跳转的相关内容来源网络仅供参考，相关信息请以官方公告为准！