Vue Router 的使用指南

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • [一、安装 Vue Router](#一、安装 Vue Router)
  • [二、配置 Vue Router](#二、配置 Vue Router)
  • • （一）创建路由实例
    • （二）在主文件中引入路由实例
    • （三）定义路由组件
  • [三、使用 `<router-view>` 和 `<router-link>`](#三、使用 <router-view> 和 <router-link>)
  • • （一）`<router-view>`
    • （二）`<router-link>`
  • 四、动态路由匹配
  • 五、嵌套路由
  • 六、路由守卫
  • • （一）全局守卫
    • （二）路由独享守卫
    • （三）组件内守卫
  • 七、编程式导航
  • 八、路由懒加载
  • 九、常见问题与解决方法
  • • （一）路由跳转时页面不更新
    • （二）路由参数变化时组件不更新
    • [（三）路由守卫中如何获取 `this`](#（三）路由守卫中如何获取 this)
  • 十、总结

Vue Router 是 Vue.js 的官方路由管理器，它允许你通过不同的 URL 显示不同的组件，从而实现单页面应用（SPA）。本文将详细介绍如何在 Vue 项目中使用 Vue Router，包括安装、配置和常见用法。

一、安装 Vue Router

Vue Router 可以通过 npm 或 yarn 安装。在 Vue 3 项目中，通常使用 Vue Router 4。

npm install vue-router@4
# 或者
yarn add vue-router@4

二、配置 Vue Router

（一）创建路由实例

在 Vue 项目中，通常会创建一个专门的文件（如 router/index.js）来配置路由。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

（二）在主文件中引入路由实例

在项目的主文件（如 main.js 或 main.ts）中，引入并使用路由实例。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');

（三）定义路由组件

路由组件是普通的 Vue 组件，通常放在 views 文件夹中。

<!-- views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

<!-- views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>

三、使用 <router-view> 和 <router-link>

（一）<router-view>

<router-view> 是一个占位符，用于渲染当前匹配的路由组件。

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

当 URL 改变时，<router-view> 会自动渲染对应的路由组件。

（二）<router-link>

<router-link> 是 Vue Router 提供的导航组件，用于在路由之间导航。它会被渲染为一个 <a> 标签。

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

<router-link> 会自动设置 href 属性，并在点击时触发路由跳转，而不会刷新页面。

四、动态路由匹配

Vue Router 支持动态路由匹配，允许你在路由路径中定义动态参数。

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

在组件中，可以通过 this.$route.params 访问动态参数。

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

五、嵌套路由

Vue Router 支持嵌套路由，允许你在路由中定义子路由。

const routes = [
  {
    path: '/admin',
    component: Admin,
    children: [
      {
        path: 'dashboard',
        component: Dashboard
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
];

在父组件中，可以使用 <router-view> 渲染子路由组件。

<template>
  <div>
    <h1>Admin Panel</h1>
    <router-view></router-view>
  </div>
</template>

六、路由守卫

Vue Router 提供了路由守卫功能，用于在路由跳转前后执行逻辑，例如权限验证、加载指示等。

（一）全局守卫

全局守卫在所有路由跳转时都会触发。

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.beforeEach((to, from, next) => {
  console.log('Global before each');
  next();
});

（二）路由独享守卫

路由独享守卫仅在特定路由跳转时触发。

const routes = [
  {
    path: '/about',
    component: About,
    beforeEnter: (to, from, next) => {
      console.log('About route before enter');
      next();
    }
  }
];

（三）组件内守卫

组件内守卫在组件实例上定义，用于在组件级别控制路由跳转。

<script>
export default {
  beforeRouteEnter(to, from, next) {
    console.log('Component before route enter');
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('Component before route update');
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('Component before route leave');
    next();
  }
};
</script>

七、编程式导航

除了使用 <router-link>，你还可以通过编程式的方式进行路由跳转。

// 在组件中
export default {
  methods: {
    goToHome() {
      this.$router.push('/');
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};

八、路由懒加载

为了提高应用的性能，Vue Router 支持路由组件的懒加载。懒加载会在路由组件首次加载时才加载对应的模块。

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('../views/About.vue')
  }
];

九、常见问题与解决方法

（一）路由跳转时页面不更新

如果在路由跳转时页面没有更新，可能是因为组件没有重新渲染。可以通过 key 属性强制组件重新渲染。

<router-view :key="$route.fullPath"></router-view>

（二）路由参数变化时组件不更新

如果路由参数变化时组件没有更新，可以在组件内使用 watch 或 computed 监听 $route 的变化。

<script>
export default {
  watch: {
    '$route.params.id'(newVal, oldVal) {
      console.log('Route param changed:', newVal);
    }
  }
};
</script>

（三）路由守卫中如何获取 this

在路由守卫中，this 不指向组件实例。如果需要访问组件实例，可以通过 next(vm => { ... }) 的方式。

router.beforeEach((to, from, next) => {
  next((vm) => {
    console.log(vm); // 访问组件实例
  });
});

十、总结

Vue Router 是 Vue.js 的官方路由管理器，用于实现单页面应用的路由功能。通过本文的介绍，你应该已经掌握了 Vue Router 的基本使用方法，包括安装、配置、动态路由、嵌套路由、路由守卫、编程式导航和懒加载等。

在实际开发中，Vue Router 是构建复杂单页面应用的核心工具之一。合理使用路由功能可以提高用户体验，优化应用性能，并实现更灵活的页面导航。

希望本文能帮助你更好地理解和使用 Vue Router，让你在 Vue 开发中更加得心应手。