个人主页: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路由这么玩,让你的网页嗖嗖跳转的相关内容来源网络仅供参考,相关信息请以官方公告为准!
原创文章,作者:CSDN,如若转载,请注明出处:https://www.sudun.com/ask/93057.html