VueRouter跳转详解

小蓝 • 2024-11-15 03:23 • 编程

一、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的学习非常重要，在开发过程中是必须掌握的技能之一。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/153758.html