本文详细介绍了VueRouter4的基本功能、安装配置方法以及路由守卫的使用，帮助读者全面了解和掌握VueRouter4。此外，文章还深入讲解了动态路由与参数传递、编程式导航以及如何与UI组件结合使用，旨在提升开发效率和用户体验。
VueRouter4简介 什么是VueRouter4VueRouter4是Vue.js官方提供的路由管理器，它允许我们在Vue应用中添加路由，实现页面之间的跳转。VueRouter4是Vue.js项目中最常用的路由插件之一，它可以帮助开发者实现单页面应用（SPA）的导航。
VueRouter4的基本功能与优势VueRouter4的基本功能包括导航、参数传递、动态路由、路由守卫等。它的优势在于：
- 简单的API：VueRouter4提供了一套简洁且强大的API，使得路由管理变得简单而直观。
- 良好的性能：VueRouter4采用了虚拟DOM技术，使得页面的切换变得非常平滑，用户体验极佳。
- 支持路由懒加载：VueRouter4支持按需加载路由组件，这在构建大型应用时特别有用，可以大幅度减少应用的启动时间。
安装VueRouter4可以通过npm进行：
npm install vue-router@next接下来，创建一个路由实例，并将其挂载到Vue应用中。首先，创建一个路由配置文件，例如router/index.js：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
``
在Vue应用的主文件中（例如`main.js`），引入并使用路由实例：
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');这样就完成了一个基本的VueRouter4配置。
基本路由配置 创建路由组件在Vue Router中，每个路由都对应一个组件。我们可以在src/views目录下创建相应的组件文件：
// src/views/Home.vue
<template>
<div>
<h1>Home Page</h1>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
// src/views/About.vue
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>路由配置文件中的每一条配置项定义了一个路由规则。路由规则通常包含以下几部分：
- path：路由的路径。
- name：路由的名称。
- component：对应的组件。
例如：
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];嵌套路由是指在一个路由组件中定义子路由，这样可以在不同的子路由之间切换。例如：
const routes = [
{
path: '/',
name: 'Home',
component: Home,
children: [
{
path: 'child',
name: 'Child',
component: Child
}
]
},
{
path: '/about',
name: 'About',
component: About
}
];使用命名路由可以在路由跳转时使用路由名，这样更方便且不易出错。例如：
// 在模板中
<router-link :to="{ name: 'Home' }">Home</router-link>
// 在JS代码中
this.$router.push({ name: 'Home' });VueRouter4提供了多种类型的守卫，包括：
- 全局守卫：在所有路由之前运行。
- 前置守卫：在导航被确认前运行。
- 后置守卫：在导航被确认后运行，无论导航成功与否。
例如，全局守卫：
router.beforeEach((to, from, next) => {
console.log('Global before each');
next();
});全局守卫的具体代码
router.beforeEach((to, from, next) => {
console.log('Global before each');
next();
});路由守卫通常用于用户权限验证、页面加载前的数据预加载等场景。例如，在用户权限验证时，可以阻止没有权限的用户访问特定的路由。
实战案例：登录验证假设有一个登录页面和一个隐私页面，只有登录的用户才能访问隐私页面。可以使用路由守卫来实现这一功能。
首先，定义登录状态的getter：
import { createApp } from 'vue';
import router from './router';
const app = createApp(App);
app.use(router);
const isAuthenticated = () => {
// 模拟登录状态
return window.localStorage.getItem('isAuthenticated') === 'true';
};
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated()) {
next({
path: '/login',
query: { redirect: to.fullPath }
});
} else {
next();
}
} else {
next();
}
});
app.mount('#app');然后在路由配置中添加requiresAuth元信息：
const routes = [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/privacy',
name: 'Privacy',
component: Privacy,
meta: { requiresAuth: true }
}
];最后，处理登录成功后的逻辑：
methods: {
login() {
// 处理登录逻辑
window.localStorage.setItem('isAuthenticated', 'true');
this.$router.push({ name:.
'Privacy' });
}
}导航守卫的深入理解与应用
导航守卫提供了更细粒度的控制能力，例如在导航前进行用户权限验证：
router.beforeEach((to, from, next) => {
if (to.path === '/admin') {
if (isAuthenticated()) {
next();
} else {
next('/login');
}
} else {
next();
}
});还可以在导航后执行清理操作：
router.afterEach((to, from) => {
console.log('Route changed from', from.path, 'to', to.path);
});导航守卫的后置守卫
router.afterEach((to, from) => {
console.log('Route changed from', from.path, 'to', to.path);
});实战案例：用户权限控制
假设有一个管理员页面，只有管理员用户才能访问。可以使用路由守卫来实现这一功能。
首先，定义管理员状态的getter：
const isAdministrator = () => {
// 模拟管理员状态
return window.localStorage.getItem('isAdministrator') === 'true';
};然后在路由配置中添加requiresAdmin元信息：
const routes = [
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: { requiresAdmin: true }
}
];最后，处理导航逻辑：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAdmin)) {
if (!isAdministrator()) {
next({
path: '/login',
query: { redirect: to.fullPath }
});
} else {
next();
}
} else {
next();
}
});动态路由允许我们定义参数化的路径，例如：
const routes = [
{
path: '/user/:id',
name: 'User',
component: User
}
];:id表示动态参数，可以在组件中通过props接收：
// 在路由配置中
{
path: '/user/:id',
name: 'User',
component: User,
props: true
}
// 在User.vue组件中
<template>
<div>
<h1>User {{ $route.params.id }}</h1>
</div>
</template>
<script>
export default {
props: ['id']
}
</script>除了动态路由参数，还可以通过query参数传递额外的参数。
例如，在导航时传递参数：
this.$router.push({ name: 'User', params: { id: 123 }, query: { name: 'John' } });在组件中接收这些参数：
export default {
props: ['id', 'query'],
created() {
console.log(this.query.name); // 输出 'John'
}
}动态路由常用于用户详情页面、文章详情页面等场景。例如，用户详情页面可能包含用户ID作为路由参数，这样可以根据路由参数动态加载用户信息。
导航守卫与编程式导航 编程式导航的使用编程式导航是指在JavaScript代码中进行导航，例如：
this.$router.push('/about');编程式导航的优势在于可以灵活地控制导航逻辑，例如在确认用户操作后进行导航：
methods: {
navigate() {
if (confirm('Are you sure?')) {
this.$router.push('/about');
}
}
}导航守卫提供了更细粒度的控制能力，例如在导航前进行用户权限验证：
router.beforeEach((to, from, next) => {
if (to.path === '/admin') {
if (isAuthenticated()) {
next();
} else {
next('/login');
}
} else {
next();
}
});还可以在导航后执行清理操作：
router.afterEach((to, from) => {
console.log('Route changed from', from.path, 'to', to.path);
});假设有一个管理员页面，只有管理员用户才能访问。可以使用路由守卫来实现这一功能。
首先，定义管理员状态的getter：
const isAdministrator = () => {
// 模拟管理员状态
return window.localStorage.getItem('isAdministrator') === 'true';
};然后在路由配置中添加requiresAdmin元信息：
const routes = [
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: { requiresAdmin: true }
}
];最后，处理导航逻辑：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAdmin)) {
if (!isAdministrator()) {
next({
path: '/login',
query: { redirect: to.fullPath }
});
} else {
next();
}
} else {
next();
}
});Vue Router可以与任何UI框架结合使用，例如Element UI、Vuetify等。以Element UI为例，可以在路由组件中使用Element UI提供的组件：
<template>
<el-card>
<h1>User {{ $route.params.id }}</h1>
</el-card>
</template>
<script>
import { defineComponent } from 'vue';
import { ElCard } from 'element-plus';
export default defineComponent({
components: {
ElCard
},
props: ['id']
});
</script>当路由变化时，UI组件需要相应地更新。例如，导航到不同的页面时，可以改变页面的主题样式。
可以使用Vue Router提供的watch来监听路由的变化：
import { onBeforeRouteUpdate } from 'vue-router';
export default {
watch: {
$route(to, from) {
console.log('Route changed from', from.path, 'to', to.path);
// 根据路由变化更新UI
}
},
beforeRouteUpdate(to, from, next) {
// 监听路由变化
onBeforeRouteUpdate((to, from, next) => {
// 更新UI
});
}
}假设有一个主题切换功能，当用户导航到不同的页面时，页面的主题样式会随之变化。
首先，定义主题切换逻辑：
methods: {
switchTheme() {
const theme = this.$route.params.theme || 'light';
document.documentElement.style.setProperty('--theme', theme);
}
}然后在路由配置中定义带有主题参数的动态路由：
const routes = [
{
path: '/theme/:theme',
name: 'Theme',
component: Theme,
props: true
}
];最后，在组件中使用主题切换逻辑：
<template>
<div>
<h1>Theme: {{ $route.params.theme }}</h1>
</div>
</template>
<script>
export default {
props: ['theme'],
watch: {
$route: 'switchTheme'
},
mounted() {
this.switchTheme();
},
methods: {
switchTheme() {
const theme = this.$route.params.theme || 'light';
document.documentElement.style.setProperty('--theme', theme);
}
}
}
</script>
<style>
:root {
--theme: light;
}
body.light {
background-color: white;
}
body.dark {
background-color: black;
}
</style>
随时随地看视频
