Vue路由这么玩,让你的网页嗖嗖跳转(vue 页面路由)

Vue路由这么玩,让你的网页嗖嗖跳转
​🌈个人主页:前端青山 🔥系列专栏:vue篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Vue篇专栏内容:V

个人主页: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

(0)
CSDN的头像CSDN
上一篇 2024年7月5日
下一篇 2024年7月5日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注