前端学习

Vue Router入门

# Vue Router 入门

官方文档：Vue Router (opens new window)

# 一、前端路由 = “单页应用中的控制器导航”

在 Java 后端中，你会定义很多 Controller，接收不同路径请求，比如 /user/list、/user/detail。

前端使用 Vue Router，也是通过路径来切换页面视图（组件），只不过是在浏览器端完成页面切换，而不是后端渲染 HTML。

Vue Router = 前端页面的“路径跳转控制器”。

# 二、安装与初始化 Router

# 1. 安装

npm install vue-router

# 2. 创建路由配置文件（推荐写在 `src/router/index.js`）

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

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

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

export default router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 3. 挂载路由到应用中（main.js）

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

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

1
2
3
4
5

# 三、视图跳转：你从哪个“URL”加载哪个页面？

# 1. 在 App.vue 添加 `<router-view />`

<template>
  <router-view></router-view> <!-- 相当于“子路由入口” -->
</template>

1
2
3

# 2. 创建页面组件

<!-- src/views/User.vue -->
<template><h2>用户页面</h2></template>

1
2

访问浏览器中的 /user，就会看到这个页面。

# 四、导航跳转方式（静态与编程式）

# 1. 使用 `<router-link>`

<router-link to="/user">进入用户页</router-link>

# 2. 使用 JS 跳转（编程式导航）

import { useRouter } from 'vue-router';

const router = useRouter();
router.push('/user'); // 类似后端的重定向

1
2
3
4

# 五、传参方式详解（路径、查询、状态）

# 1. 动态路径参数（类似 `/user/123`）

// 路由配置
{ path: '/user/:id', component: UserDetail }

// 页面跳转
router.push('/user/123')

// 在 UserDetail 组件中获取参数
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id); // 123

1
2
3
4
5
6
7
8
9
10

# 2. 查询参数（?key=value）

router.push({ path: '/user', query: { name: 'jack' } });
// => /user?name=jack

1
2

# 嵌套路由与命名路由

适用于页面中嵌套页面（如 tab 页）。

{
  path: '/admin',
  component: AdminLayout,
  children: [
    { path: 'user', component: AdminUser },
    { path: 'role', component: AdminRole }
  ]
}

1
2
3
4
5
6
7
8

访问 /admin/user 会加载 AdminLayout + AdminUser。

# 七、导航守卫：前端权限控制核心

类比后端的拦截器、Spring Security。

# 示例：未登录用户重定向到登录页

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.path !== '/login' && !token) {
    next('/login');
  } else {
    next(); // 放行
  }
});