一、VueRouter跳转方式
VueRouter是一个Vue.js官方提供的路由管理器。它可以通过“路由”将组件映射到URL,实现组件的切换。VueRouter提供了三种方式进行跳转:
- 声明式导航
- 编程式导航
- 命名路由
二、VueRouter跳转方法
1.声明式导航
<!--template-->
<router-link to="/home">Home</router-link>
<!--OR-->
<router-link :to="{ path: '/home' }">Home</router-link>
2.编程式导航
//HTML
<button @click="gotoHome">Home</button>
//JS
methods: {
gotoHome() {
this.$router.push('/home');
//或者
this.$router.push({ path: '/home' });
}
}
3.命名路由
<!--template-->
<router-link :to="{ name: 'home' }">Home</router-link>
//JS
const router = new VueRouter({
routes: [
{
path: '/home',
name: 'home',
component: Home
}
]
})
三、VueRouter跳转当前页
当你在同一个页面中多次点击同一个路由时,一般情况下Vue-Router不会响应。如果想进行强制跳转,需要采用以下两种方法之一:
- 使用$route对象的reload()方法
- 在
标签中添加:key属性
代码演示:
1.this.$router.go(0);//reload
2.<router-link :to="{ path:'/home',query:{id:1} }" :key="$route.fullPath">Home</router-link>
四、VueRouter跳转原理
VueRouter是实现路由的组件,对它的理解,我们需要对Vue单文件组件有一定的了解,同时VueRouter底层是基于hash和history来实现的。下面是VueRouter的原理示意图:
五、VueRouter跳转之后刷新
在VueRouter中,通过路由跳转的时候,组件是不会被销毁的,而是被缓存起来方便下次使用。有时候我们需要组件被退出后重新渲染,这时候有两种解决方式:
- 在$routeChange钩子中调用组件的生命周期
- 通过在路由中添加参数,例如时间戳或随机数,来重新渲染组件
代码演示:
1.//JS
created() {
console.log('create');
this.init();
},
beforeDestroy() {
console.log('destroy');
},
beforeRouteEnter(to,from,next){
next(vm=>{
// 更新视图组件
vm.$options.methods.init.call(vm);
})
},
//HTML
<!--template-->
<div>{{msg}}</div>
2.<!--template-->
<router-link :to="{path:'/home?time='+new Date().getTime()}">Home</router-link>
六、VueRouter跳转很慢
在VueRouter中,当我们频繁跳转路由时,可能会出现页面卡顿的现象。这时候可以通过使用keep-alive组件来缓存已经渲染的组件,达到提高访问速度的目的。
<!--template-->
<keep-alive>
<router-view :key="$route.path"></router-view>
</keep-alive>
七、VueRouter官方文档
VueRouter官网提供了详细的中英文文档,可以在上面查找到任何需要的信息和教程。官方文档链接:VueRouter
八、VueRouter有哪些组件
VueRouter提供了三个重要的组件,分别是:
- router-link:生成一个a标签用于跳转到一个指定的地址。
- router-view:路由匹配到的组件将渲染在这个
中。 - keep-alive:用于缓存已经渲染的组件,节约性能提高访问速度。
九、VueRouter中文文档
VueRouter中文文档提供了对VueRouter实用性很强的介绍和使用方法。链接如下:VueRouter
十、VueRouter路由守卫
路由守卫是VueRouter中一种特殊的操作方式,可以在路由发生变化时对跳转控制进行干预。路由守卫提供了以下三种钩子函数:
- 全局守卫
- 组件内守卫
- 异步路由守卫
//JS
const router = new VueRouter({
routes: [
{
path:'/home',
component: Home,
beforeEnter: (to, from, next) => {
if (localStorage.getItem('login') === 'true') {
next();
} else {
next('/login');
}
}
}
]
})
以上是VueRouter的跳转详解,对VueRouter的学习非常重要,在开发过程中是必须掌握的技能之一。