Vue下如何实现前端路由跳转？-猿码集

1. 什么是前端路由

前端路由是指将不同路径映射到不同的组件或页面，实现单页应用（SPA）。通过前端路由，可以在不刷新浏览器的情况下更新页面内容，提升用户体验。在Vue中，可以使用Vue Router来实现前端路由。

2. Vue Router简介

Vue Router是Vue.js官方的路由管理器，通过它可以实现路由的生成、传参、跳转等功能，支持基于HTML5 history或hash来管理路由。Vue Router在Vue.js中以插件的形式存在，因此使用时，需要先创建Vue.js实例对象，再在其中注入Vue Router插件。

3. 创建路由

3.1 安装Vue Router

在开始创建路由之前，需要先安装Vue Router。使用npm安装：

npm install vue-router --save

3.2 注册路由

首先，需要创建一个Router实例对象router，然后调用Vue.js实例的use方法注册Router插件。下面是一个最基本的路由示例：


import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];
const router = new VueRouter({
  routes
});
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

在上面的代码中，routes数组定义了两个路由，分别是/和/about。每个路由都有一个对应的组件，这里未给出定义。在router实例对象中，定义了路由数组，然后将其注入Vue.js实例中。Vue.js实例的render方法中，挂载App组件到ID为app的DOM元素上。这里假设App组件中包含了<router-view>标签，用于展示路由对应的组件。

4. 路由跳转

4.1 声明式导航

在Vue.js中，提供了一种声明式的方式导航，通过<router-link>标签实现。它会被渲染成一个<a>标签，点击该标签会触发路由跳转。可以设置to属性指定跳转的目的地，下面是一个示例：


<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

上面的代码中，<router-link>标签的to属性分别指向了/和/about，点击<router-link>标签就会跳转到对应的路由。<router-view>标签用于展示路由对应的组件。

4.2 编程式导航

除了声明式导航外，Vue Router也支持编程式导航。通过调用$router.push()方法实现跳转。


methods: {
  goHome() {
    this.$router.push('/');
  },
  goAbout() {
    this.$router.push('/about');
  }
}

在上面的代码中，通过定义goHome()和goAbout()方法，分别调用$router.push()方法实现了跳转到/和/about路由。

5. 路由传参

在Vue Router中，可以通过props传递参数，也可以通过路由传参的方式传递参数。

5.1 props传参

通过props传递参数，需要在路由数组中设置props属性，指向一个函数或对象，该函数或对象返回或包含需要传递的参数。下面是一个示例：


const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true
  }
];

在上面的代码中，路由路径中包含参数:id，在User组件中可以通过props:['id']获取该参数。为了能够获取到路由参数，需要设置props: true。当然也可以通过函数的方式获取路由参数，下面的示例中定义了一个这样的函数：


const routes = [
  {
    path: '/user/:id',
    component: User,
    props: route => ({ id: route.params.id })
  }
];

在上面的函数中，使用route.params.id获取路由参数，然后返回一个包含路由参数的对象，该对象中的属性可以作为组件的props。

5.2 路由传参

路由传参的方式与props传参类似，在设置路由时通过params属性定义需要传递的参数。使用$route.params可以获取路由参数。下面是一个示例：


// 跳转路由时传递参数
this.$router.push({ path: '/user', params: { id: 123 } });
// 在组件中获取路由参数
console.log(this.$route.params.id);

在上面的代码中，$router.push()方法调用时通过params属性传递了参数，跳转到/user路由。在组件中可以通过$route.params.id获取该参数。

6. 总结

Vue Router是Vue.js官方的路由管理器，通过它可以轻松实现前端路由，提高用户体验。在Vue.js中，通过声明式和编程式两种方式实现路由跳转。同时支持props传参和路由传参两种方式传递参数。对于Vue.js开发者来说，熟练掌握Vue Router的使用是非常重要的。

Vue下如何实现前端路由跳转？