VueRouter官方插件

1. 简介

Vue Router 是 Vue.js 的官方路由管理器。它与 Vue.js 核心深度集成，使构建单页面应用（SPA）时的路由配置变得极具声明式。本文核心基于 Vue Router v3（适配 Vue 2.x 版本）展开。

2. 基础配置

在项目中安装对应版本的 Vue Router：

npm install vue-router@3

在工程中定义并配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';

// 声明使用插件
Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // 路由懒加载方式
    component: () => import('../views/AboutView.vue')
  }
];

const router = new VueRouter({
  mode: 'history', // 可选择 hash 或 history 模式
  base: process.env.BASE_URL,
  routes
});

export default router;

在全局 main.js 入口中挂载：

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

new Vue({
  router, // 注入路由实例
  render: h => h(App)
}).$mount('#app');

3. 关键功能

3.1. 动态路由匹配

在路由路径中使用冒号 : 标记动态参数，可在目标组件中通过 this.$route.params 获取：

const routes = [
  // 动态路由，匹配如 /user/123
  { path: '/user/:id', component: () => import('../views/UserDetail.vue') }
];

3.2. 全局前置守卫

利用导航守卫控制页面跳转流程，实现鉴权逻辑：

router.beforeEach((to, from, next) => {
  const isLogin = !!localStorage.getItem('token');
  if (to.name !== 'login' && !isLogin) {
    // 未登录且前往非登录页，强制跳转至登录页
    next({ name: 'login' });
  } else {
    // 正常放行
    next();
  }
});