Vue.js 路由

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页应用（SPA），实现页面组件的切换、参数传递、导航守卫等功能。

以下是 Vue Router 的核心用法（以Vue 3 + Vue Router 4为主，同时标注 Vue 2 的差异）：

一、安装

# Vue 3npminstallvue-router@4# Vue 2npminstallvue-router@3

二、基础配置

1. 创建路由实例

// router/index.jsimport{createRouter,createWebHistory}from'vue-router';importHomefrom'../views/Home.vue';importAboutfrom'../views/About.vue';constroutes=[{path:'/',component:Home},{path:'/about',component:About},];constrouter=createRouter({history:createWebHistory(),// Vue 3 默认使用 history 模式routes,});exportdefaultrouter;

Vue 2 写法：

importVuefrom'vue';importVueRouterfrom'vue-router';Vue.use(VueRouter);constrouter=newVueRouter({mode:'history',// 或 'hash'routes,});

2. 挂载到应用

// main.jsimport{createApp}from'vue';importAppfrom'./App.vue';importrouterfrom'./router';constapp=createApp(App);app.use(router);app.mount('#app');

三、核心组件

1.<router-link>：导航链接

<template><nav><!-- 默认渲染为 <a> 标签，点击自动跳转 --><router-linkto="/">首页</router-link><router-linkto="/about">关于</router-link><!-- 指定 tag 属性渲染为其他标签（Vue 2） --><router-linkto="/home"tag="button">首页</router-link><!-- Vue 3 使用 v-slot 自定义 --><router-linkto="/home"v-slot="{ navigate, href, isActive }"><a:href="href":class="{ active: isActive }"@click="navigate">首页</a></router-link></nav></template>

2.<router-view>：路由出口

<template><divid="app"><router-view/><!-- 组件渲染在这里 --></div></template>

四、路由配置详解

1. 动态路由参数

constroutes=[{path:'/user/:id',component:User},{path:'/post/:id/comment/:commentId',component:Comment},];

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

// User.vue 中获取参数import{useRoute}from'vue-router';constroute=useRoute();console.log(route.params.id);// 获取 :id 的值

2. 查询参数（Query）

<router-link:to="{ path: '/search', query: { q: 'vue', page: 1 } }">搜索</router-link>

// 获取 queryconsole.log(route.query.q);// 'vue'console.log(route.query.page);// 1

3. 嵌套路由（子路由）

constroutes=[{path:'/user',component:User,children:[{path:'profile',component:UserProfile},// 完整路径: /user/profile{path:'settings',component:UserSettings},],},];

<!-- User.vue --><template><div><h1>用户中心</h1><router-linkto="/user/profile">个人资料</router-link><router-linkto="/user/settings">设置</router-link><router-view/><!-- 子组件渲染在这里 --></div></template>

4. 重定向与别名

constroutes=[{path:'/',redirect:'/home'},// 访问 / 跳转到 /home{path:'/home',component:Home},{path:'/h',alias:'/home'},// 访问 /h 等同于 /home];

五、编程式导航

在组件内使用useRouter钩子进行跳转：

import{useRouter,useRoute}from'vue-router';constrouter=useRouter();constroute=useRoute();// 跳转router.push('/about');// 带参数router.push({name:'User',params:{id:123}});// 带查询参数router.push({path:'/search',query:{q:'vue'}});// 替换当前历史记录（不可回退）router.replace('/login');// 前进/后退router.go(-1);// 后退一页router.go(1);// 前进一页

六、导航守卫（路由拦截）

1. 全局守卫

// router/index.jsrouter.beforeEach((to,from,next)=>{constisAuthenticated=localStorage.getItem('token');if(to.meta.requiresAuth&&!isAuthenticated){next('/login');// 未登录跳转到登录页}else{next();// 放行}});

2. 路由独享守卫

constroutes=[{path:'/admin',component:Admin,beforeEnter:(to,from,next)=>{if(isAdmin()){next();}else{next('/403');}},},];

3. 组件内守卫

exportdefault{beforeRouteEnter(to,from,next){// 组件实例还没创建，this 不可用next(vm=>{vm.fetchData();});},beforeRouteUpdate(to,from,next){// 当前组件复用，参数变化时触发this.fetchData(to.params.id);next();},beforeRouteLeave(to,from,next){// 离开当前路由时触发if(this.hasUnsavedChanges){constanswer=window.confirm('有未保存内容，确定离开吗？');next(answer);}else{next();}},};

七、路由元信息（Meta）

在路由配置中添加自定义字段：

constroutes=[{path:'/admin',component:Admin,meta:{requiresAuth:true,role:'admin'},},];

在守卫中读取：

router.beforeEach((to,from,next)=>{if(to.meta.requiresAuth&&!isAuthenticated){next('/login');}elseif(to.meta.role&&!hasRole(to.meta.role)){next('/403');}else{next();}});

八、懒加载（代码分割）

优化性能，按需加载路由组件：

constroutes=[{path:'/about',component:()=>import('../views/About.vue'),// 只有访问时才加载},];

九、Vue 2 vs Vue 3 关键差异

十、总结

核心流程：

1. 定义路由配置（路径 → 组件映射）
2. 创建路由实例并挂载
3. 使用<router-link>和<router-view>构建页面
4. 利用导航守卫处理权限、数据加载等逻辑

Vue Router 是 Vue 生态中不可或缺的一部分，熟练掌握它能极大提升开发效率。