Vue Router 入门指南：基础配置、路由守卫与动态路由

Vue Router 入门指南：基础配置、路由守卫与动态路由

简介：
Vue Router 是 Vue.js 官方的路由管理工具，用于在 Vue 应用中实现页面导航。掌握 Vue Router 的基本配置、路由守卫以及动态路由和懒加载是构建复杂 Vue 应用的基础。本文将详细介绍 Vue Router 的核心概念，并提供 Vue 2 和 Vue 3 的示例代码，帮助你快速上手。

目标：
本文旨在帮助读者理解和掌握 Vue Router 的基本用法，包括如何配置路由、使用路由守卫和导航钩子，以及如何实现动态路由和懒加载。通过对比 Vue 2 和 Vue 3 的示例，读者将能够灵活地在不同版本的 Vue 应用中应用这些技术。

---

1. 路由基础配置

路由基础配置是使用 Vue Router 进行页面导航的第一步。配置路由包括定义路由规则和将这些规则应用到 Vue 实例中。

1.1 Vue 2 示例代码

安装 Vue Router

npm install vue-router

路由配置（router/index.js）

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

主文件配置（main.js）

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

组件（Home.vue 和 About.vue）

Home.vue:

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

About.vue:

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

1.2 Vue 3 示例代码

安装 Vue Router

npm install vue-router

路由配置（router/index.js）

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/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）

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

const app = createApp(App);
app.use(router);
app.mount('#app');

组件（Home.vue 和 About.vue）

Home.vue:

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script setup>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home'
});
</script>

About.vue:

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script setup>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'About'
});
</script>

---

2. 路由守卫与导航钩子

路由守卫用于在路由变化前、路由进入后或路由离开前进行一些操作，如权限检查、数据预取等。

2.1 Vue 2 示例代码

全局路由守卫

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About }
  ]
});

// 路由守卫
router.beforeEach((to, from, next) => {
  // 在这里可以进行权限检查
  console.log(`导航到 ${to.path}`);
  next(); // 必须调用 next() 方法来继续导航
});

export default router;

路由独享守卫

// About.vue
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
  beforeRouteEnter(to, from, next) {
    // 在路由进入前调用
    console.log('进入 About 页面');
    next();
  }
};
</script>

2.2 Vue 3 示例代码

全局路由守卫

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

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

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

// 路由守卫
router.beforeEach((to, from, next) => {
  // 在这里可以进行权限检查
  console.log(`导航到 ${to.path}`);
  next(); // 必须调用 next() 方法来继续导航
});

export default router;

路由独享守卫

<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script setup>
import { onBeforeRouteEnter } from 'vue-router';

onBeforeRouteEnter((to, from, next) => {
  // 在路由进入前调用
  console.log('进入 About 页面');
  next();
});
</script>

---

3. 动态路由与懒加载

动态路由允许你根据路由参数显示不同的内容，懒加载可以提高应用性能，通过按需加载路由组件来减小初始包体积。

3.1 Vue 2 示例代码

动态路由配置

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import User from '@/components/User.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: User
    }
  ]
});

组件（User.vue）

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User'
};
</script>

懒加载

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: () => import('@/components/User.vue')
    }
  ]
});

3.2 Vue 3 示例代码

动态路由配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import User from '../components/User.vue';

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

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

export default router;

组件（User.vue）

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
</script>

懒加载

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

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../components/User.vue')
  }
];

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

export default router;

---

总结

本文详细介绍了 Vue Router 的基础配置、路由守卫与导航钩子、动态路由与懒加载。在 Vue 2 和 Vue 3 中，这些技术的使用方式有所不同，但核心概念保持一致。通过掌握这些内容，你可以更高效地管理 Vue 应用中的页面导航，并提升应用的性能和用户体验。希望本文能帮助你在实际项目中更好地使用 Vue Router。

看到这里的小伙伴，欢迎 点赞👍评论📝收藏🌟

希望这篇关于 Vue Router 基本使用的文章对你有所帮助。如果有其他需要调整或补充的地方，请告诉我！