vue-router使用步骤,vue-router作用
本文主要给大家总结了10个关于Vue路由器的高级技巧，通过示例代码进行了非常详细的介绍，对你的学习或工作有一定的参考价值。和有需要的朋友一起学习吧。
前言
Erouter是Vue.js的官方路线管理器.
它与Vue.js的核心深度集成，可以轻松构建单页面应用。
包括的功能有：
嵌套的路线/视图表
基于组件的模块化路由配置
路由参数、查询、通配符
基于Vue.js转场系统的视图转场效果
细粒度导航控件
带有自动激活的CSS类的链接。
5 HTML5历史模式或哈希模式，在IE9中自动降级
自定义滚动条行为
但本文是作者对一些实际项目的总结，主要包括：
响应路由参数变化
路线匹配
高级匹配模式
匹配优先级
推送和替换的第二个和第三个参数
路由视图
再直接的
使用props解耦$route
导航防护装置
保护下一个方法
希望这篇文章对你有帮助。
主体
1. 响应路由参数变化
对于重用组件(只有路由参数改变)，生命周期函数的钩子将不被调用。如何刷新组件？
手表监控
观察：{
$route(目的地，出发地){
//响应路线更改.
}
}
在RouteUpdate之前
beforeRouteUpdate(收件人，发件人，下一个){
//对路由更改做出反应.
//不要忘记调用next()
}
2. 路由匹配
{
//所有路径都将匹配
路径：“*”
}
{
//将匹配任何以“/user-”开头的路径。
路径：“/用户-*”
}
注意：使用通配符路由时，请确保路由的顺序正确，即包含通配符的路由应该放在最后。路由{path: * 通常用于客户端404错误。
如果您使用历史模式，请确保正确配置您的服务器。
当使用通配符时，名为pathMatch的参数会自动添加到$ route.params中。
它包含URL与通配符匹配的部分：
//给出一个路由{path: /user-*}
这个。$router.push(/user-admin )
这个。$ route . params . path match// admin
//给出一个路由{path: *}
这个。$ router . push(/不存在)
这个。$ route . params . path match///不存在
3. 高级匹配模式
//命名参数必须由“单个字符”组成[A-Za-z09]
//?可选参数
{ path: /optional-params/:foo？}
//路由跳转可以设置foo参数也可以不设置，可选。
router-link to=/optional-params /optional-params/router-link
router-link to=/optional-params/foo /optional-params/foo/router-link
//零个或多个参数
{路径：/optional-params/*
到=/number 的路由器链接没有参数/router-link。
router-link to=/number/foo 000 a参数/router-link
路由器链接到=/number/foo111/fff222 多个参数/路由器链接
//一个或多个参数
{ path: /optional-params/:foo }
Router-link to=/number/foo a参数/router-link
router-link to=/number/foo/foo 111/fff 222 多个参数/router-link
//自定义匹配参数
//您可以为所有参数提供自定义的regexp，这将覆盖默认值([\/])
{ path:/optional-params/:id(\ \ d) }
{ path: /optional-params/(foo/)？bar }
4. 匹配优先级
有时，一条路径可能匹配多条路由。
此时，匹配的优先级按照路由定义的顺序：先定义，优先级最高。
5. push和replace的第二个第三个参数
在2.2.0版本中，可以选择在router.push或router.replace中提供onComplete和onAbort回调作为第二个和第三个参数。
当导航成功完成(在所有异步钩子被解析之后)或终止(在当前导航完成之前导航到相同的路线或导航到不同的路线)时，这些回调将被调用。在3.1.0中，第二个和第三个参数可以省略。此时，如果支持Promise，router.push或router.replace将返回一个Promise。
让我们看几个例子，看看什么时候调用第二个和第三个参数：
1.组件1跳转到组件2
//组件1
这个。$router.push({ name: number }，()={
Console.log(组件1:在完成回调时)；
}, ()={
console . log( component 1:on abort回调)；
});
//组件2
beforeRouteEnter(收件人，发件人，下一个){
Console.log(组件2:before router )；
next()；
},
创建之前(){
Console.log(组件2:创建前)；
},
已创建(){
Console.log(组件2:已创建)；
}
组件间跳转触发完全回调。
2.组件2跳转到组件2(无参数)
这个。$router.push({ name: number}，()={
Console.log(组件2:完成回调时)；
}, ()={
Console.log(组件2，自跳转：onAbort回调)；
});
当没有参数时，组件的自跳转触发onAbort回调。但是带参数自跳的时候情况可能有点不一样。
3.组件2跳转到组件2(带参数)
这个。$router.push({ name: number ，params: { foo: this.number}}，()={
Console.log(组件2:完成回调时)；
}, ()={
Console.log(组件2，自跳转：onAbort回调)；
});
当组件带参数跳转时，既不会触发onComplete回调，也不会触发onAbort回调。
6. 路由视图
有时您希望同时显示多个视图(在同一级别)，而不是嵌套显示。例如，创建一个有两个视图的布局，侧边栏(侧边导航)和主视图(主要内容)。这时，命名视图就派上了用场。
界面中可以有多个单独命名的视图，而不是只有一个出口。
如果路由器视图没有设置名称，则默认为默认。
路由器视图class= view one /路由器视图
路由器视图class= view two name= a /路由器视图
路由器视图class= view three name= b /路由器视图
一个视图由一个组件渲染，因此多个视图需要多个组件用于同一条路线。
确保正确使用组件配置(带S):
const router=new VueRouter({
路线：[
{
路径：“/”，
组件：{
默认：Foo，
答：酒吧，
巴兹
}
}
]
});
7. 重定向
{路径：“/a”，重定向：“/b”}
{ path:“/a”，重定向：{ name:“foo”} }
{路径：“/a”，重定向：到={
//该方法接收目标路由作为参数。
//返回重定向的字符串路径/路径对象
}}
注意：导航护卫不适用于跳跃路线，而仅适用于其目标。
在上面的示例中，向/a路由添加beforeEach或beforeLeave保护不会有任何效果。
8. 使用props解耦$route
在组件中使用$route会使其与对应的route高度耦合，这样组件只能用在一些特定的URL上，限制了它的灵活性。
//路由器文件
//对于包含命名视图的路由，您必须分别为每个命名视图添加props选项：
{
路径：“/number/:name”，
道具：真的，
//对象模式属性：{newsletterPopup: false}
//函数模式props:(route)=({ query:route . parmas . name })
姓名：号码，
component:()=import(/* webpackChunkName: number */。/views/number . vue’)
}
//组件采集
导出默认值{
道具：[名称]
}
9. 导航守卫
1. 三种全局守卫
router . before每个全局前警卫进入路线前。
添加了Router.beforeResolve全局解析保护2.5.0。在beforeRouteEnter调用之后调用。
路由器。每本全球邮册进入路线后。
//导入文件
从导入路由器。/路由器
//全球前沿卫士
router.beforeEach((收件人，发件人，下一个)={
console . log( before each global front guard )；
next()；
});
//全局分辨率保护
router.beforeResolve((收件人，发件人，下一个)={
Console.log(beforeResolve全局解析保护)；
next()；
});
//全球后方防卫
router.afterEach((收件人，发件人)={
console . log( after each global rear guard )；
});
2.路由专用保护
进入前，全球警卫队在进入路线前进行守卫。
{
路径：“/number/:name”，
道具：真的，
姓名：号码，
//路由独占保护
beforeEnter:(收件人，发件人，下一个)={
Console.log(输入路由前的独占保护)；
next()；
},
component:()=import(/* webpackChunkName: number */。/views/number . vue’)
}
3. 组件内守卫
在RouteEnter之前
ForerouteUpdate(2.2中的新功能)
beforeRouteLeave
beforeRouteEnter(收件人，发件人，下一个){
//在确认呈现该组件的对应路径之前调用
//没有！可以！获取组件实例` this。
//因为在防护执行之前还没有创建组件实例。
Console.log(门禁console.log(beforeRouteEnter组件)；
next()；
},
beforeRouteUpdate(收件人，发件人，下一个){
//当当前路由改变，但组件被多路复用时调用
//比如对于一个带有动态参数的path /foo/:id，在/foo/1和/foo/2之间跳转时，
//由于将呈现相同的Foo组件，组件实例将被重用。在这种情况下这个钩子将被调用。
//可以访问组件实例` this。
console . log( update guard console . log( beforeRouteUpdate component))；
next()；
},
beforeRouteLeave(收件人、发件人、下一个){
//当导航离开此组件的相应路线时调用
//可以访问组件实例` this。
console . log( leave guard console . log( before route leave component))；
next()；
}
组件1跳转到组件2，组件2跳转到组件2本身。
组件1跳转到组件2，然后组件2跳转到组件1。
10. 守卫的 next 方法
接下来：调用这个方法的resolve钩子。
Next():继续处理管道中的下一个钩子。如果所有钩子都被执行，导航状态被确认。
Next(false):中断当前导航。如果浏览器的URL被更改(由用户手动更改或通过浏览器的后退按钮更改)，URL地址将被重置为对应于from路由的地址。
Next(/)或next({ path: /}):跳转到不同的地址。当前导航被中断，然后执行新的导航。您可以将任何位置的对象传递给next，并且您可以设置选项，如replace: true、name: home 以及在to prop或router.push中使用的任何选项。
Next(Error): (2.4.0)如果传入Next的参数是错误实例，导航将被终止，错误将被传递给router.onError()注册的回调。
最后
最后希望你能多看看文档，理解了再在项目中使用，这样使用后就不会有bug了。谢谢你。
关于Vue路由器10个高级技能的这篇文章就到这里了。更多关于Vue路由器高级技巧的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。