【vue教程】五. Vue 的路由管理

目录

• • 往期列表
  • 本章涵盖知识点
  • 回顾
  • Vue Router 的基本概念
  • • 什么是 Vue Router？
    • 为什么需要 Vue Router？
  • 路由的配置和使用
  • • 安装 Vue Router
    • 创建路由
    • 在 Vue 实例中使用路由
    • 模板中的路由链接
  • 动态路由和嵌套路由
  • 路由守卫
  • • 什么是路由守卫？
    • 全局路由守卫
    • 组件内路由守卫
  • 实例演示
  • • 创建一个简单的 SPA
  • 结语

往期列表

• 【vue 教程】一. 环境搭建与代码规范配置
• 【vue 教程】二. Vue 特性原理详解
• 【vue 教程】三. 组件复用和通信(7 种方式)
• 【vue 教程】四. Vue 计算属性和侦听器

本章涵盖知识点

• Vue Router 的基本概念
• 路由的配置和使用
• 动态路由和嵌套路由
• 路由守卫

回顾

在第四篇文章中，我们详细探讨了 Vue 的计算属性和侦听器，以及生命周期钩子函数。我们了解到计算属性如何基于它们的依赖进行缓存，侦听器如何帮助我们观察和响应 Vue 实例上的数据变化。

正文开始 ， 如果觉得文章对您有帮助，请帮我三连 + 订阅，谢谢💖💖💖

Vue Router 的基本概念

什么是 Vue Router？

Vue Router 是 Vue 官方的 路由管理器 ，用于构建单页面应用。它允许你通过 URL 来映射不同的组件， 实现页面的动态加载和导航。

为什么需要 Vue Router？

在现代 Web 应用中，用户期望页面能够快速响应，无需重新加载整个页面。Vue Router 通过前端路由解决了这个问题，它使得组件的切换变得无缝，提升了用户体验。

路由的配置和使用

安装 Vue Router

首先，你需要安装 Vue Router：

npm install vue-router

创建路由

在 Vue Router 中，路由是通过 router.addRoute 方法配置的：

import Vue from "vue";
import Router from "vue-router";
import Home from "@/components/Home";
import About from "@/components/About";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
    },
    {
      path: "/about",
      name: "About",
      component: About,
    },
  ],
});

在 Vue 实例中使用路由

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

模板中的路由链接

在 Vue 模板中，你可以使用 来创建导航链接：

router-link to="/home">Homerouter-link>

router-link to="/about">Aboutrouter-link>

动态路由和嵌套路由

动态路由

动态路由是指路由的某些部分是动态的，例如用户 ID 或文章的 slug：

{
  path: '/user/:id',
  name: 'User',
  component: User
}

嵌套路由

Vue Router 支持嵌套路由，这使得你可以创建模块化的组件结构：

{
  path: '/dashboard',
  component: Dashboard,
  children: [
    {
      path: 'posts',
      component: Posts
    },
    {
      path: 'users',
      component: Users
    }
  ]
}

路由守卫

什么是路由守卫？

路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。

全局路由守卫

router.beforeEach((to, from, next) => {
  if (to.path === "/login" && isUserAuthenticated()) {
    next({ path: "/" });
  } else {
    next();
  }
});

组件内路由守卫

export default {
  beforeRouteEnter(to, from, next) {
    
  },
  beforeRouteUpdate(to, from, next) {
    
  },
  beforeRouteLeave(to, from, next) {
    
  },
};

实例演示

创建一个简单的 SPA

我们将创建一个简单的单页面应用，包含首页、关于页和用户个人页。

1. 安装 Vue Router：

   npm install vue-router
   

2. 配置路由：

   
   import Vue from "vue";
   import Router from "vue-router";
   import Home from "@/components/Home";
   import About from "@/components/About";
   import User from "@/components/User";
   
   Vue.use(Router);
   
   export default new Router({
     mode: "history",
     routes: [
       { path: "/", component: Home },
       { path: "/about", component: About },
       { path: "/user/:id", component: User },
     ],
   });
   

3. 在 Vue 实例中使用路由：

   
   import Vue from "vue";
   import App from "./App.vue";
   import router from "./router";
   
   new Vue({
     router,
     render: (h) => h(App),
   }).$mount("#app");
   

4. 模板中的路由链接：

   
   template>
     div id="app">
       router-link to="/" exact>Homerouter-link>
       router-link to="/about">Aboutrouter-link>
       router-link to="/user/1">User 1router-link>
       router-view>router-view>
     div>
   template>
   

结语

通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由 。我们还探讨了 路由守卫 的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。