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

目录

往期列表


本章涵盖知识点

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

回顾

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

Vue Router 的基本概念

什么是 Vue Router?

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

为什么需要 Vue Router?

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

路由的配置和使用

安装 Vue Router

首先,你需要安装 Vue Router:

bash 复制代码
npm install vue-router

创建路由

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

javascript 复制代码
// router.js
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 实例中使用路由

javascript 复制代码
// main.js
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>来创建导航链接:

html 复制代码
<router-link to="/home">Home</router-link>

<router-link to="/about">About</router-link>

动态路由和嵌套路由

动态路由

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

javascript 复制代码
{
  path: '/user/:id',
  name: 'User',
  component: User
}

嵌套路由

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

javascript 复制代码
{
  path: '/dashboard',
  component: Dashboard,
  children: [
    {
      path: 'posts',
      component: Posts
    },
    {
      path: 'users',
      component: Users
    }
  ]
}

路由守卫

什么是路由守卫?

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

全局路由守卫

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

组件内路由守卫

javascript 复制代码
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
  },
};

实例演示

创建一个简单的 SPA

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

  1. 安装 Vue Router

    bash 复制代码
    npm install vue-router
  2. 配置路由

    javascript 复制代码
    // router.js
    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 实例中使用路由

    javascript 复制代码
    // main.js
    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    
    new Vue({
      router,
      render: (h) => h(App),
    }).$mount("#app");
  4. 模板中的路由链接

    html 复制代码
    <!-- App.vue -->
    <template>
      <div id="app">
        <router-link to="/" exact>Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/user/1">User 1</router-link>
        <router-view></router-view>
      </div>
    </template>

结语

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

相关推荐
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart4 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter