您的位置:

VueRouter跳转详解

一、VueRouter跳转方式

VueRouter是一个Vue.js官方提供的路由管理器。它可以通过“路由”将组件映射到URL,实现组件的切换。VueRouter提供了三种方式进行跳转:

  1. 声明式导航
  2. 编程式导航
  3. 命名路由

二、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不会响应。如果想进行强制跳转,需要采用以下两种方法之一:

  1. 使用$route对象的reload()方法
  2. 标签中添加: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中,通过路由跳转的时候,组件是不会被销毁的,而是被缓存起来方便下次使用。有时候我们需要组件被退出后重新渲染,这时候有两种解决方式:

  1. 在$routeChange钩子中调用组件的生命周期
  2. 通过在路由中添加参数,例如时间戳或随机数,来重新渲染组件

代码演示:

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提供了三个重要的组件,分别是:

  1. router-link:生成一个a标签用于跳转到一个指定的地址。
  2. router-view:路由匹配到的组件将渲染在这个 中。
  3. keep-alive:用于缓存已经渲染的组件,节约性能提高访问速度。

九、VueRouter中文文档

VueRouter中文文档提供了对VueRouter实用性很强的介绍和使用方法。链接如下:VueRouter

十、VueRouter路由守卫

路由守卫是VueRouter中一种特殊的操作方式,可以在路由发生变化时对跳转控制进行干预。路由守卫提供了以下三种钩子函数:

  1. 全局守卫
  2. 组件内守卫
  3. 异步路由守卫
//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的学习非常重要,在开发过程中是必须掌握的技能之一。