Vue2 学习笔记 - 第四篇：路由管理与应用架构

一、Vue Router 简介

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。支持：

• 嵌套路由
• 动态路由匹配
• 编程式导航
• 命名路由和命名视图
• 路由守卫

---

二、基本使用

安装

npm install vue-router@3

路由配置结构

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({
  mode: 'history',
  routes
});

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

---

三、动态路由参数

{
  path: '/user/:id',
  component: User
}

可通过 this.$route.params.id 获取动态参数。

---

四、嵌套路由

{
  path: '/parent',
  component: Parent,
  children: [
    {
      path: 'child',
      component: Child
    }
  ]
}

---

五、导航方式

声明式

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

编程式

this.$router.push('/about');

支持 push, replace, go, back, forward。

---

六、路由守卫

全局守卫

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 验证逻辑
  } else {
    next();
  }
});

组件内守卫

beforeRouteEnter(to, from, next) {
  next(vm => {
    // 可访问组件实例
  });
}

---

七、命名路由

{ path: '/user/:id', name: 'user', component: User }

使用时：

this.$router.push({ name: 'user', params: { id: 123 } });

---