vue基础（十）

在 Vue 中，vue-router 是官方的路由管理插件，用于在单页面应用（SPA）中实现不同页面的切换。在此介绍 Vue 2 和 Vue 3 中路由的使用。

1. 安装 vue-router

如果是 Vue 2：

npm install vue-router@3

如果是 Vue 3：

npm install vue-router@4

2. 基本路由配置

创建 router/index.js 作为路由配置文件。

Vue 2

# 路由文件
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter);

# 定义路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

# 创建路由实例
const router = new VueRouter({
  mode: 'history', // 使用 history 模式，去掉 URL 中的 #
  routes
});

export default router;

 Vue 3

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

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

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

export default router;

3. 在 Vue 项目中使用路由

(1) 在 main.js 中注册路由

Vue 2

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

Vue.config.productionTip = false;

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

Vue 3

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

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

(2) 在 App.vue 中添加路由出口

<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

• <router-link> 用于创建路由导航，to 属性指定跳转路径。
• <router-view> 是路由出口，显示当前匹配的组件。

4. 动态路由

(1) 定义动态路由

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

(2) 在 User.vue 组件中获取动态参数

<template>
  <div>
    <h2>用户 ID：{{ $route.params.id }}</h2>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('用户 ID:', this.$route.params.id);
  }
};
</script>

Vue 3 Composition API

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

const route = useRoute();
console.log('用户 ID:', route.params.id);
</script>

5. 路由重定向和别名

(1) 重定向

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home }
];

(2) 路由别名

const routes = [
  { path: '/home', component: Home, alias: '/index' }
];

这样访问 /index 也会展示 Home 组件。

6. 路由守卫

Vue 的 路由守卫（Navigation Guards） 主要用于在路由跳转前后执行特定逻辑，比如：

✅ 权限控制（如登录验证）
✅ 数据预加载（在进入页面前获取数据）
✅ 路由切换时的动画或离开提示
✅ 记录用户访问路径（比如保存上一次访问的页面）

(1) 路由守卫的分类

Vue Router 提供了三种类型的守卫：

守卫类型	作用范围	触发时机
全局守卫	作用于所有路由	路由跳转前后
路由独享守卫	作用于某个特定路由	进入该路由前
组件内守卫	作用于某个组件	进入、更新、离开该组件时

(2)全局守卫

1.beforeEach（全局前置守卫）

用于 拦截导航，一般用于 登录权限校验。

router.beforeEach((to, from, next) => {
  console.log('全局前置守卫：', to.path);
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    next('/login'); // 未登录，跳转到登录页
  } else {
    next(); // 继续路由跳转
  }
});

next() 说明：

• next() 继续导航
• next(false) 取消导航
• next('/login') 跳转到指定路径

2. beforeResolve（全局解析守卫）

Vue 2.5+ 新增，在 beforeEach 和 beforeEnter 之后执行，所有组件内守卫执行前触发，用于等待异步数据加载完成。

router.beforeResolve((to, from, next) => {
  console.log('全局解析守卫：', to.path);
  next();
});

3.afterEach（全局后置守卫）

用于 记录访问路径、切换页面标题等，不会影响路由跳转。

router.afterEach((to, from) => {
  console.log('全局后置守卫：', to.path);
  document.title = to.meta.title || '默认标题';
});

(3) 路由独享守卫

作用于单个路由，只在进入该路由时触发。

const routes = [
  { 
    path: '/profile', 
    component: Profile, 
    beforeEnter: (to, from, next) => {
      console.log('路由独享守卫：进入 /profile');
      next();
    }
  }
];

(4) 组件内守卫

作用于某个组件，通常用于 数据加载、离开前确认。

1. beforeRouteEnter

进入组件前触发，不能访问 this，因为组件还没创建。

<script>
export default {
  beforeRouteEnter(to, from, next) {
    console.log('组件内守卫：进入前');
    next(vm => {
      console.log('组件创建后，访问 vm:', vm);
    });
  }
};
</script>

2. beforeRouteUpdate（Vue 2.2+）

当 路径相同但参数变化时触发，适用于 监听动态路由参数变化（如 /user/:id）。

<script>
export default {
  beforeRouteUpdate(to, from, next) {
    console.log('组件内守卫：更新前', to.params.id);
    this.loadUserData(to.params.id);
    next();
  }
};
</script>

3. beforeRouteLeave

离开组件前触发，通常用于 确认框。

<script>
export default {
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('确定要离开吗？');
    if (answer) {
      next();
    } else {
      next(false);
    }
  }
};
</script>

总结

守卫	作用	适用场景
beforeEach	全局前置守卫	登录校验、全局数据预加载
beforeResolve	全局解析守卫	组件内守卫执行前，确保异步数据加载完成
afterEach	全局后置守卫	记录访问路径、修改页面标题
beforeEnter	路由独享守卫	进入某个特定路由前检查
beforeRouteEnter	组件内守卫（进入前）	进入组件前获取数据（不能访问 this）
beforeRouteUpdate	组件内守卫（更新时）	监听动态参数变化
beforeRouteLeave	组件内守卫（离开时）	页面离开前弹出确认框

7. 路由懒加载

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

这样 About.vue 只有在访问 /about 时才会加载，提高首屏加载速度。

8. 路由模式

(1) hash 模式（默认模式）

hash 模式的 URL 以 # 开头，例如：

http://example.com/#/about

特点

✅ 无需后端配置，兼容性好。
❌ # 号对 SEO 不友好。

使用方式

Vue 2

const router = new VueRouter({
  mode: 'hash',
  routes
});

Vue 3

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

(2) history 模式

history 模式使用 HTML5 History API，使 URL 看起来更干净，例如：

http://example.com/about

特点

✅ URL 结构清晰，没有 # 号，对 SEO 友好。
❌ 需要后端支持，否则刷新页面会 404。

使用方式

Vue 2

const router = new VueRouter({
  mode: 'history',
  routes
});

Vue 3

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

后端配置（Nginx）

location / {
  try_files $uri /index.html;
}

 如果使用 history 模式，一定要配置服务器，否则刷新时会返回 404。

(3)abstract 模式

abstract 模式不会在 URL 中展示路由信息，适用于 无浏览器环境（如 SSR）。

特点

✅ 适用于服务器端渲染（SSR）或测试环境。
❌ 不能在普通浏览器中直接使用。

使用方式

Vue 2

const router = new VueRouter({
  mode: 'abstract',
  routes
});

Vue 3 不支持 abstract 模式，因为它主要用于 SSR，而 Vue 3 推荐使用 Nuxt.js 进行服务器端渲染。

模式	适用场景	SEO 友好	需要服务器配置	URL 形式
hash	适用于所有浏览器	❌	❌	http://example.com/#/about
history	SEO 友好的 SPA	✅	✅	http://example.com/about
abstract	SSR 或测试环境	❌	❌	不展示 URL

在大多数情况下：

• 开发环境 推荐 hash，无需配置后端。
• 正式环境 推荐 history，但要配合服务器设置。
• SSR 环境 可能需要 abstract，但 Vue 3 一般使用 Nuxt 进行 SSR 处理。

9. 路由传参

(1) URL 传参

<router-link :to="'/user/' + userId">用户详情</router-link>

获取：

this.$route.params.id;

(2) Query 传参

<router-link :to="{ path: '/user', query: { id: 123 }}">用户详情</router-link>

获取：

this.$route.query.id;

(3) props 传参

在 router/index.js 中启用 props

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

在 User.vue 组件中直接使用 props

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

10. keep-alive 保持组件状态

某些情况下，我们希望组件在切换时保持状态，而不是每次都重新加载。

<keep-alive>
  <router-view></router-view>
</keep-alive>

这样，当用户切换回来时，组件不会重新创建，而是保留之前的状态。