vue-router

vue3路由管理器

单页面应用程序 SPA (Single Page Application) 是指 所有的功能都在一个HTML页面 上实现。

单页应用 VS 多页应用

分类	实现方式	页面性能	开发效率	用户体验	首屏加载	SEO
单页	一个HTML页面	按需更新	高	高	慢	差
多页	多个HTML页面	整页更新	一般	一般	快	优

SEO（Search Engine Optimization，搜索引擎优化），通过优化网站结构、内容，提高网站在搜索引擎结构页中的排名。

1. 路由介绍

Vue Router 是 Vue 官方的路由管理器，是构建单页面应用的核心功能之一，允许不刷新页面的情况下切换视图。

Vue Router 是 路径和组件 的 映射 关系。

• 组件的分类

  • 页面组件配合路由切换，建议放置在 src/views 目录下

  • 普通组件用于复用，建议放置在 src/components 目录下

• import 中路径可以使用 @ 代表 src 目录。

2. 基本使用

2.1 步骤拆分

1️⃣下载 Vue Router 模块。

npm install vue-router

2️⃣导入相关函数。

// main.js
import { createRouter, createWebHashHistory } from 'vue-router'

3️⃣创建路由实例。

// main.js
const router = createRouter({history: createWebHashHistory(),    // 哈希模式routes: []  // 路由表规则, 即 path 与 component 的对应关系                   
}

4️⃣注册路由。

// main.js
app.use(router)

5️⃣src/views目录下，创建页面组件。

src/
├─ views/
│   ├─ Login.vue
│   ├─ Home.vue

6️⃣导入组件并配置路由规则。

// main.js
routes: [{path: '/login',component: Login},{path: '/home',component: Home}
]

7️⃣ 设置路由出口（路径匹配时，组件的显示位置）。

// App.vue
<template><div><!-- 路由出口 --><router-view></router-view></div>
</template>

2.2 完整代码示例

// main.js
import { createApp } from 'vue'
import { createRouter , createWebHashHistory } from 'vue-router'
import App from './App.vue'
import Login from './views/Login.vue'
import Home from '@/views/Home..vue'const router = createRouter({history: createWebHashHistory(),routes: [{path: '/login',component: Login},{path: '/home',component: Home}]
})const app = createApp(App)
app.use(router)
app.mount('#app')// App.vue
<script setup></script><template><div><router-view></router-view></div>
</template><style scoped></style>

2.3 路由模式

2.3.1 Hash模式（默认）

• http://localhost:5173/#/login

import { createWebHashHistory } from 'vue-router'

2.3.2 History模式

• http://localhost:5173/login

• 上线需要服务器端支持，开发环境不影响

import { createWebHistory } from 'vue-router'

2.4 路由运作原理

1. 浏览器的 url 改变时，匹配路由表数组中 path 值。

2. 找到对应组件 component。

3. 将其渲染到 <router-view /> 的位置。

2.5 封装路由模块

新建 router/index.js ，将路由模块抽离出来，方便管理和维护。

// router/index.js
import { createRouter , createWebHashHistory , createWebHistory} from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'const router = createRouter({history: createWebHistory(),routes: [{path: '/login',component: Login},{path: '/home',component: Home}]
})export default router// main.js
import { createApp } from 'vue'
import App from './App.vue'
// ./router/index.js -> index.js可省略
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')// App.vue
<template><div><router-view></router-view></div>
</template>

3. 路由配置

3.1 重定向

网页刚打开时，url 默认是 / 路径，未匹配到组件时，会出现空白。

 routes: [{  // 访问 / ，会自动跳转 /loginpath: '/',redirect: '/login'}]

3.2 404

在 Vue Router 中配置 404 页面是确保用户访问不存在的路由时获得良好体验的重要方式。

 routes: [{  path: '/:pathMatch(.*)*',component: NotFound}]

4. 声明式导航与传参

4.1 声明式导航

声明式导航提供了一个全局组件 router-link，可以为其添加 to 属性，用于点击跳转。

• router-link 标签会默认渲染成一个 <a> 标签，点击后会渲染 /login 匹配的组件。

• 当链接匹配到当前路由时，会自动添加激活类名。

  • router-link-active 模糊匹配，只要以 /login 开头的路径都可以匹配到

  • router-link-exact-active 精确匹配，仅能匹配 /login

• router-link 添加原生事件的方式 @click.native

<router-link to="login">登录</router-link>

4.2 声明式导航传参

4.2.1 查询参数传参

// 1.字符串的形式
<router-link to="/path?key=value&key=value&..."></router-link>
// 2.对象
<router-link :to="{path: '/path',query: {key:value,...}
}"></router-link>

4.2.2 接收查询参

<script setup>
import { useRoute } from 'vue-router'
// 1.得到当前激活的路由对象
const route = useRoute()
// 2.获取查询参数
console.log(route.query)
</script>

4.2.3 动态路由传参

// 1.改写路由表中path值
routes: [{name: login,    // 仅当使用对象动态传参时，需要指定name属性path: '/login/:id/:name/...'component: Login}
]
// 字符串的形式
<router-link to="/path/value1/value2/..."></router-link>
// 对象
<router-link :to="{name: 'login',params: {key:value,...}
}"></router-link>

4.2.4 接收动态参

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route.params)
</script>

5. 编程式导航与传参

5.1 编程式导航

编程式导航是通过 JavaScript 代码控制路由跳转的方式，相比声明式导航（<router-link>）更加灵活，适合在方法、钩子函数或异步操作后执行导航。

// Login.vue
import { useRouter } from 'vue-router';
onMounted(() => {setTimeout(() => {// 1.字符串router.push('/home')// 2.对象router.push({path: '/home'})}, 1000)
})

5.2 编程式导航传参

5.2.1 查询参数传参

// 1.字符串的方式
router.push('/path?key=value&key=value&...')
// 2.对象
router.push({        path: '/path',query：{ key: value,...}
})

5.2.2 接收查询参

<script setup>
import { useRoute } from 'vue-router'
// 1.得到当前激活的路由对象
const route = useRoute()
// 2.获取查询参数
console.log(route.query)
</script>

5.2.3 动态路由传参

// 1.改写路由表中path值
routes: [{name: login,    // 仅当使用对象动态传参时，需要指定name属性path: '/login/:id/:name/...'component: Login}
]// 1.字符串的形式
router.push('/login/110/abc')
// 2.对象
router.push({name: 'login'params: {id: 101,name: 'abc'}
})

5.2.4 接收动态参

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route.params)
</script>

6. 路由嵌套

步骤：

1. 创建二级路由页面组件。

2. 路由表数组中，在相应的一级路由配置规则中，配置 children 属性。

3. 在相应的一级路由页面组件中，添加 router-view 出口。

注意：

• 二级路由中的 path 推荐不加 /。

• 路由跳转时需要写完整路径（父路径 + 当前路径）。

• 防止二级路由页面空白，建议在一级路由中添加重定向。

// router/index.js
const router = createRouter({history: createWebHistory(),routes: [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect: '/home/recommend',children: [{path: 'recommend',component: Recommend},{path: 'setting',component: Setting}]}]
})// Home.vue
<template><div class="home"><router-link to="/home/recommend">推荐</router-link><br><router-link to="/home/setting">设置</router-link><p>这是登录成功的页面</p><p><router-view></router-view></p></div>
</template>

7. 路由守卫

路由守卫是 Vue Router 提供的导航控制机制，允许开发者在路由导航过程中插入控制逻辑，实现权限验证、数据预加载等功能。

7.1 全局守卫（作用于所有路由）

每个路由跳转前都会触发该回调函数。

const router = new VueRouter({ ... })router.beforeEach((to, from) => {// to: 即将要进⼊的路由// from: 当前正要离开的路由// return false: 取消导航// return undefined | true 同意导航// return { name: 'xxx' } 重定向
}

7.2 路由独享守卫

const routes = [{path: '/home',component: Home,beforeEnter: (to, from) => {}}
]