Vue Router：让你的应用路由起来！

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 1. 路由导航
- 2. 嵌套路由
- 3. 路由参数
- 4. 路由过渡
- 5. 导航守卫
- 6. 路由状态管理

Vue Router 是 Vue.js 官方的路由管理器，它提供了一种机制来实现单页面应用（SPA）的路由功能。主要作用包括：

1. 路由导航

Vue Router 允许你在应用程序中定义不同的路由，并根据用户的导航操作跳转到相应的路由。它通过监听 URL 的变化来响应导航操作，并能够使用编程方式进行路由跳转。

当使用 Vue Router 时，可以通过以下代码案例来演示如何定义路由、监听导航操作以及进行编程式的路由跳转：

首先，安装并导入 Vue Router：

npm install vue-router

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

然后，定义路由组件：

// Home.vue
<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page!</p>
  </div>
</template>

// About.vue
<template>
  <div>
    <h2>About</h2>
    <p>This is the about page.</p>
  </div>
</template>

接下来，创建一个 Vue Router 实例并配置路由：

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

const router = new VueRouter({
  routes
});

在 Vue 根实例中使用 <router-view> 来渲染匹配的组件：

new Vue({
  router,
  el: '#app'
});

<!-- App.vue -->
<template>
  <div id="app">
    <h1>My App</h1>
    <router-view></router-view>
  </div>
</template>

现在，你可以根据用户的导航操作触发路由跳转，或者使用编程式的导航方式进行路由跳转：

// 监听导航操作
router.beforeEach((to, from, next) => {
  // 做一些导航守卫的逻辑处理
  next();
});

// 编程式路由跳转
// 使用 $router.push 方法跳转到指定路由
router.push('/about');

通过以上代码案例，你可以更好地理解 Vue Router 的使用方式，并实现在应用程序中定义不同的路由，并根据用户的导航操作进行路由跳转的功能。

2. 嵌套路由

Vue Router 支持嵌套路由，可以在一个父路由下定义子路由。这样可以轻松地实现页面的层级嵌套和组织，使得应用程序的路由结构更加清晰和可维护。

当使用 Vue Router 来实现嵌套路由时，可以通过以下代码案例来演示如何定义父子路由的嵌套和组织：

首先，定义父路由和子路由的组件：

// Parent.vue
<template>
  <div>
    <h2>Parent</h2>
    <p>This is the parent page.</p>
    <router-view></router-view>
  </div>
</template>

// Child.vue
<template>
  <div>
    <h3>Child</h3>
    <p>This is the child page.</p>
  </div>
</template>

接下来，创建一个 Vue Router 实例并配置父子路由：

const routes = [
  {
    path: '/',
    component: Parent,
    children: [
      {
        path: '',
        component: Child
      },
      {
        path: 'child',
        component: Child
      }
    ]
  }
];

const router = new VueRouter({
  routes
});

在父路由组件中使用 <router-view> 标签来渲染子路由：

<template>
  <div>
    <h2>Parent</h2>
    <p>This is the parent page.</p>
    <router-view></router-view>
  </div>
</template>

现在，当访问父路由时，子路由的组件会被渲染到父路由组件的 <router-view> 中，形成嵌套路由的效果。

例如，当访问 / 路径时，父路由组件会渲染，并同时渲染子路由组件到父路由组件的 <router-view> 中。当访问 /child 路径时，父路由组件同样会被渲染，但子路由组件会根据路由配置进行渲染。

通过以上代码案例，你可以实现在 Vue Router 中创建父子路由的嵌套和组织，使得应用程序的路由结构更加清晰和可维护。

3. 路由参数

Vue Router 允许定义路由参数，这样可以在路由中传递参数，以实现动态路由的效果。参数可以通过 URL 的路径、查询字符串或者路由的配置项进行传递，从而实现对应组件的动态渲染和数据展示。

当使用 Vue Router 定义路由参数时，可以通过以下代码案例来演示如何传递参数和在组件中获取参数：

首先，定义带有参数的路由：

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

在上述代码中，:id 是路径参数，可以在路由中传递不同的值，例如 /user/1 或 /user/2。

然后，在组件中通过 $route.params 来获取传递的参数：

<template>
  <div>
    <h2>User Profile</h2>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    const id = this.$route.params.id;
    // 根据传递的参数做一些逻辑处理
  }
};
</script>

使用 $route.params.id 可以获取路由中传递的参数，进行对应组件的动态渲染和数据展示。

另外，还可以在定义路由时指定查询字符串参数：

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

在上述代码中，route.query 是查询字符串参数，可以在 URL 中传递，例如 /user?id=1&name=John。

然后，在组件中可以使用 props 接收查询字符串参数：

<template>
  <div>
    <h2>User Profile</h2>
    <p>User ID: {{ query.id }}</p>
    <p>User Name: {{ query.name }}</p>
  </div>
</template>

<script>
export default {
  props: ['query']
};
</script>

通过以上代码，你可以在 Vue Router 中定义路由参数，并在组件中获取路径参数或查询字符串参数，实现动态路由的效果，进行组件的动态渲染和数据展示。

4. 路由过渡

Vue Router 对页面切换时的过渡效果提供了内置的支持。通过配置路由的过渡效果，可以实现页面之间的平滑过渡和动画效果，提升用户体验。

当使用 Vue Router 对页面切换时提供过渡效果时，可以通过以下代码案例来演示如何配置路由过渡效果：

首先，定义需要应用过渡效果的组件：

// Home.vue
<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page!</p>
  </div>
</template>

// About.vue
<template>
  <div>
    <h2>About</h2>
    <p>About us</p>
  </div>
</template>

接下来，在组件中使用 <transition> 包裹内容，指定过渡效果的 CSS 类名：

<template>
  <transition name="fade">
    <div>
      <!-- 组件内容 -->
    </div>
  </transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在上述代码中，我们使用了名为 “fade” 的过渡效果类名，并通过 CSS 定义了过渡的动画效果。

最后，在路由配置中为路由添加过渡效果的名称：

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

在上述代码中，当切换到 / 路径时，会加载 Home 组件并应用过渡效果。

5. 导航守卫

Vue Router 提供了导航守卫的功能，可以在路由导航过程中拦截和处理导航操作。通过导航守卫，可以实现在路由切换前后进行数据加载、权限验证、跳转取消等逻辑的处理。

当使用 Vue Router 的导航守卫时，可以通过以下代码案例来演示如何拦截和处理路由导航：

首先，定义导航守卫的回调函数：

const router = new VueRouter({
  routes: [...],
});

router.beforeEach((to, from, next) => {
  // 在路由切换前处理逻辑
  // 可以进行数据加载、权限验证等操作

  next(); // 调用 next() 继续路由导航
});

在上述代码中，beforeEach 是全局前置守卫，在每次路由切换前都会执行该回调函数。其中的 to 参数表示将要导航到的目标路由，from 参数表示当前导航的来源路由。

在回调函数中，可以进行一些逻辑处理，例如数据加载、权限验证等。需要注意的是，如果希望继续路由导航，需要调用 next()。

还可以定义全局后置守卫和组件内的守卫：

router.afterEach((to, from) => {
  // 在路由切换后处理逻辑
});

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeEnter: (to, from, next) => {
      // 在进入路由前处理逻辑
      next(); // 调用 next() 继续路由导航
    }
  }
];

上述代码中的 afterEach 是全局后置守卫，会在每次路由切换后执行。而 beforeEnter 是路由配置中的路由独享守卫，只会在特定的路由进入前执行。

通过定义导航守卫的回调函数，可以实现在路由导航过程中的拦截和处理操作。这样你可以加载数据、验证权限、取消跳转等，来控制路由的行为和逻辑。

6. 路由状态管理

Vue Router 可以与 Vuex（Vue.js 的状态管理库）进行无缝集成，可以在路由导航过程中进行状态管理，实现不同路由之间的数据共享和状态传递。

当使用 Vue Router 与 Vuex 进行集成时，可以通过以下代码案例来演示如何在路由导航过程中进行状态管理：

首先，创建一个 Vuex 的 store，定义需要共享和管理的状态：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    user: null // 用户信息
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  }
});

export default store;

在上述代码中，我们创建了一个包含 user 状态的 Vuex store，并定义了一个名为 setUser 的 mutation，用于更新 user 状态的值。

接下来，在路由导航过程中使用 Vuex 进行状态管理，可以在导航守卫的回调函数中调用 Vuex 的 mutation 更新状态：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

在上述代码中，我们将 Vuex store 对象传递给 Vue 实例，使其可以在整个应用中访问和使用。

在导航守卫的回调函数中更新 Vuex store 的状态：

router.beforeEach((to, from, next) => {
  // 在路由切换前处理逻辑
  // 可以进行数据加载、权限验证等操作
  const user = // 获取用户信息的逻辑，例如从后端获取用户数据

  store.commit('setUser', user); // 调用 Vuex 的 mutation 更新状态

  next(); // 调用 next() 继续路由导航
});

在上述代码中，我们在导航守卫的回调函数中获取用户信息，并通过调用 Vuex 的 setUser mutation 更新 user 状态。

在其他组件中访问 Vuex store 的状态：

// MyComponent.vue
export default {
  computed: {
    user() {
      return this.$store.state.user; // 访问 Vuex store 的状态
    }
  }
};

在上述代码中，我们使用计算属性 user 来访问 Vuex store 中的 user 状态。

通过上述代码案例，在路由导航过程中可以使用 Vuex 进行状态管理，实现不同路由之间的数据共享和状态传递。这样可以简化应用的数据传递和管理，并提升开发效率。

通过以上功能，Vue Router 提供了一种便捷的方式来管理前端应用程序的路由，使得开发者可以更好地组织和管理应用的不同页面和组件，并实现良好的用户导航体验。