VueRouter4课程：从入门到上手实战

概述

本文详细介绍了VueRouter4的基本功能、安装配置方法以及路由守卫的使用，帮助读者全面了解和掌握VueRouter4。此外，文章还深入讲解了动态路由与参数传递、编程式导航以及如何与UI组件结合使用，旨在提升开发效率和用户体验。

VueRouter4简介 什么是VueRouter4

VueRouter4是Vue.js官方提供的路由管理器，它允许我们在Vue应用中添加路由，实现页面之间的跳转。VueRouter4是Vue.js项目中最常用的路由插件之一，它可以帮助开发者实现单页面应用（SPA）的导航。

VueRouter4的基本功能与优势

VueRouter4的基本功能包括导航、参数传递、动态路由、路由守卫等。它的优势在于：

• 简单的API：VueRouter4提供了一套简洁且强大的API，使得路由管理变得简单而直观。
• 良好的性能：VueRouter4采用了虚拟DOM技术，使得页面的切换变得非常平滑，用户体验极佳。
• 支持路由懒加载：VueRouter4支持按需加载路由组件，这在构建大型应用时特别有用，可以大幅度减少应用的启动时间。

安装与配置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();
  }
});

路由与UI组件的结合 使用Vue Router与UI框架的结合

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组件的响应

当路由变化时，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>