Vue Router 入门指南：基础配置、路由守卫与动态路由

news2024/12/24 10:20:14

Vue Router 入门指南：基础配置、路由守卫与动态路由

在这里插入图片描述
简介：
Vue Router 是 Vue.js 官方的路由管理工具，用于在 Vue 应用中实现页面导航。掌握 Vue Router 的基本配置、路由守卫以及动态路由和懒加载是构建复杂 Vue 应用的基础。本文将详细介绍 Vue Router 的核心概念，并提供 Vue 2 和 Vue 3 的示例代码，帮助你快速上手。

目标：
本文旨在帮助读者理解和掌握 Vue Router 的基本用法，包括如何配置路由、使用路由守卫和导航钩子，以及如何实现动态路由和懒加载。通过对比 Vue 2 和 Vue 3 的示例，读者将能够灵活地在不同版本的 Vue 应用中应用这些技术。

文章目录

    • Vue Router 入门指南：基础配置、路由守卫与动态路由
      • 1. 路由基础配置
        • **1.1 Vue 2 示例代码**
        • **1.2 Vue 3 示例代码**
      • 2. 路由守卫与导航钩子
        • **2.1 Vue 2 示例代码**
        • **2.2 Vue 3 示例代码**
      • 3. 动态路由与懒加载
        • **3.1 Vue 2 示例代码**
        • **3.2 Vue 3 示例代码**
      • 总结

1. 路由基础配置

路由基础配置是使用 Vue Router 进行页面导航的第一步。配置路由包括定义路由规则和将这些规则应用到 Vue 实例中。

1.1 Vue 2 示例代码

安装 Vue Router

npm install vue-router

路由配置（router/index.js）

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

Vue.use(Router);

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

主文件配置（main.js）

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

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

组件（Home.vue 和 About.vue）

Home.vue:

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

About.vue:

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>
1.2 Vue 3 示例代码

安装 Vue Router

npm install vue-router

路由配置（router/index.js）

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

主文件配置（main.js）

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

组件（Home.vue 和 About.vue）

Home.vue:

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script setup>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home'
});
</script>

About.vue:

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script setup>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'About'
});
</script>

2. 路由守卫与导航钩子

路由守卫用于在路由变化前、路由进入后或路由离开前进行一些操作，如权限检查、数据预取等。

2.1 Vue 2 示例代码

全局路由守卫

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About }
  ]
});

// 路由守卫
router.beforeEach((to, from, next) => {
  // 在这里可以进行权限检查
  console.log(`导航到 ${to.path}`);
  next(); // 必须调用 next() 方法来继续导航
});

export default router;

路由独享守卫

// About.vue
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
  beforeRouteEnter(to, from, next) {
    // 在路由进入前调用
    console.log('进入 About 页面');
    next();
  }
};
</script>
2.2 Vue 3 示例代码

全局路由守卫

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// 路由守卫
router.beforeEach((to, from, next) => {
  // 在这里可以进行权限检查
  console.log(`导航到 ${to.path}`);
  next(); // 必须调用 next() 方法来继续导航
});

export default router;

路由独享守卫

<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script setup>
import { onBeforeRouteEnter } from 'vue-router';

onBeforeRouteEnter((to, from, next) => {
  // 在路由进入前调用
  console.log('进入 About 页面');
  next();
});
</script>

3. 动态路由与懒加载

动态路由允许你根据路由参数显示不同的内容，懒加载可以提高应用性能，通过按需加载路由组件来减小初始包体积。

3.1 Vue 2 示例代码

动态路由配置

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import User from '@/components/User.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: User
    }
  ]
});

组件（User.vue）

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User'
};
</script>

懒加载

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: () => import('@/components/User.vue')
    }
  ]
});
3.2 Vue 3 示例代码

动态路由配置

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import User from '../components/User.vue';

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

组件（User.vue）

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
</script>

懒加载

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../components/User.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

总结

本文详细介绍了 Vue Router 的基础配置、路由守卫与导航钩子、动态路由与懒加载。在 Vue 2 和 Vue 3 中，这些技术的使用方式有所不同，但核心概念保持一致。通过掌握这些内容，你可以更高效地管理 Vue 应用中的页面导航，并提升应用的性能和用户体验。希望本文能帮助你在实际项目中更好地使用 Vue Router。

看到这里的小伙伴，欢迎 点赞👍评论📝收藏🌟

希望这篇关于 Vue Router 基本使用的文章对你有所帮助。如果有其他需要调整或补充的地方，请告诉我！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2107863.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

web前端-HTML标签

web前端-HTML标签

一、HTML语法规范 1.基本语法概述 &#xff08;1&#xff09;HTML标签是由尖括号包围的关键词&#xff0c;例如<html> &#xff08;2&#xff09;HTML标签通常是成对出现的,例始<html>和</html>&#xff0c;我们称为双标签。标签对中的第一个标签是开始标…
阅读更多...
STM32（一）简介

STM32（一）简介

一、stm32简介 1.外设接口 通过程序配置外设来完成功能 2.系统结构 3.引脚定义 4.启动配置 5.最小系统电路
阅读更多...
解决：axios 请求头url传参数组时发生400错误

解决：axios 请求头url传参数组时发生400错误

一、前言 axios封装的网络请求&#xff0c;url传参时&#xff0c;数组作为参数传递&#xff0c;发生400错误请求时数组参数转url会保留 [] 二、原因 RFC3986&#xff1a;除了 数字 字母 -_.~ 不会被转义&#xff0c;其他字符都会被以百分号&#xff08;%&#xff09;后跟两位…
阅读更多...
QT:动态库与静态库的生成和使用

QT:动态库与静态库的生成和使用

目录 一.动态库和静态库 1.动态链接&#xff08;Dynamic Linking&#xff09; 2.静态链接&#xff08;Static Linking&#xff09; 3.选择依据 二.库的创建 1.新建文件和项目中&#xff0c;选择Library中C库 2.新建一个名为libtest库 3.打印一个qDebug&#xff0c;用于…
阅读更多...
PCA数据降维技术详解

PCA数据降维技术详解

在数据分析和机器学习的世界里&#xff0c;维度灾难是一个不可忽视的问题。随着数据维度的增加&#xff0c;计算量急剧上升&#xff0c;模型复杂度变高&#xff0c;同时可能引入噪声和冗余信息&#xff0c;影响模型的性能和解释性。主成分分析&#xff08;Principal Component …
阅读更多...
第六篇——黄金分割：毕达哥拉斯如何连接数学和美学?

第六篇——黄金分割：毕达哥拉斯如何连接数学和美学?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 人眼看到的美的东西&#xff0c;都可以从数学这个抽象的学科中得到明确的…
阅读更多...
网页打印模板解析源码--SAAS本地化及未来之窗行业应用跨平台架构

网页打印模板解析源码--SAAS本地化及未来之窗行业应用跨平台架构

一、打印模板解析 /* ///cyberwin_offline_database_printtemp.js未来之窗打印模板解析技术 2024-09 */ class CyberWin_Database_printtemp_KV {constructor() {this.data {};this.line_count 0 ;}解析(数据) {// this.data[key] value;this.line_count 0 ;this.data {}…
阅读更多...
生日（仅粉丝可见，生日是9月6日，提前一天发的）

生日（仅粉丝可见，生日是9月6日，提前一天发的）

祝我自己生日快乐&#xff01; 感谢大家的陪伴与支持&#xff0c;以后我会努力做作品的&#xff01; &#xff08;累谁也不能累自己&#xff0c;所以我打算放3天假&#xff0c;反正延迟开学&#xff0c;先玩了来再去上学&#xff01;&#xff09;
阅读更多...
数据库超时排查

数据库超时排查

背景&#xff1a; 项目是用的springboot&#xff0c;连接池用的是hikaricp&#xff0c;且数据库连接做了LB配置&#xff0c;之前就是经常会有数据库出现问题&#xff0c;专家给到的解决方案。 数据连接io超时报错&#xff0c;排查了当时数据库各项指标都无显示异常&#xff0c;…
阅读更多...
基于SA-BP模拟退火算法优化BP神经网络实现数据预测Python实现

基于SA-BP模拟退火算法优化BP神经网络实现数据预测Python实现

在数据分析和机器学习领域&#xff0c;时间序列预测和多输入单输出系统的预测是重要且复杂的问题。传统的BP&#xff08;反向传播&#xff09;神经网络虽然具有强大的非线性函数逼近能力&#xff0c;但在处理这些问题时容易陷入局部极小值、训练速度慢以及过拟合等问题。为了克…
阅读更多...
【读书笔记-《30天自制操作系统》-15】Day16

【读书笔记-《30天自制操作系统》-15】Day16

本篇内容继续多任务的讲解。上一篇中实现了两个任务之间的自动切换&#xff0c;但还不够通用&#xff0c;这里将其优化为多个任务之间的切换。接着引入了任务休眠的概念与休眠的程序实现。最后介绍了任务的优先级&#xff0c;一种用切换时间的长短来衡量&#xff0c;一种用Task…
阅读更多...
【Qt】文件对话框QFileDialog

【Qt】文件对话框QFileDialog

文件对话框QFileDialog ⽂件对话框⽤于应⽤程序中需要打开⼀个外部⽂件或需要将当前内容存储到指定的外部⽂件。 通过QFileDialog 可以选择一个文件&#xff0c;能够获取到这个文件的路径&#xff0c;打开文件/保存文件。 常⽤⽅法介绍&#xff1a; 1、打开⽂件&#xff08;⼀…
阅读更多...
【高中生讲机器学习】17. 讲人话的主成分分析，它来了！（上篇）

【高中生讲机器学习】17. 讲人话的主成分分析，它来了！（上篇）

创建时间&#xff1a;2024-08-13 首发时间&#xff1a;2024-09-05 最后编辑时间&#xff1a;2024-09-05 作者&#xff1a;Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏&#xff0c;很高兴遇见你~ 我是 Geeker_LStar&#xff0c;一名准高一学生&#xff0c;热爱…
阅读更多...
Redis 集群高可用详解及配置

Redis 集群高可用详解及配置

关型数据库 关系型数据库&#xff1a; 是建立在关系模型基础上的数据库&#xff0c;其借助于集合代数等数学概念和方法来处理数据库中的数据 主流的 MySQL、Oracle、MS SQL Server 和 DB2 都属于这类传统数据库 关型数据库的优缺点 特点&#xff1a; 1、数据关系模型基于关系…
阅读更多...
Redis使用——Redis的redis.conf配置注释详解（三）

Redis使用——Redis的redis.conf配置注释详解（三）

Redis使用——Redis的redis.conf配置注释详解&#xff08;三&#xff09; 背景 日常我们开发时&#xff0c;我们会遇到各种各样的奇奇怪怪的问题&#xff08;踩坑o(╯□╰)o&#xff09;&#xff0c;这个常见问题系列就是我日常遇到的一些问题的记录文章系列&#xff0c;这里整…
阅读更多...
鸿蒙轻内核M核源码分析系列四 中断Hwi

鸿蒙轻内核M核源码分析系列四 中断Hwi

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 持续更新中…… 在鸿蒙轻内核源码分析系列前几篇文章中&#xff0c;剖析了重要的数据结构。本文&#xff0c;我们讲述一下中断&#xff0c;会给读者介绍中…
阅读更多...
Ubuntu固定USB串口名（包括1拖N的USB串口）

Ubuntu固定USB串口名（包括1拖N的USB串口）

在运行Ubuntu系统的开发板上，如果使用可插拔的USB串口，有时候程序正在运行时，如果突然连接传感器的USB串口设备被插拔了一下，这时，会发现系统中的USB串口名发生了改变。例如，插拔之前是/dev/ttyUSB0，插拔之后变成了/dev/ttyUSB3。发生这种情况的时候，有时候会导致程序无…
阅读更多...
Windows I/O系统

Windows I/O系统

硬件存储体系 寄存器 处理器内部定义的存储体&#xff0c;它们除了存储功能&#xff0c;往往还兼有其他的能力&#xff0c;比如参与运算&#xff0c;地址解析&#xff0c;指示处理器的状态&#xff0c;等等。寄存器是由处理器内部专门的触发器电路实现的&#xff0c;处理器往…
阅读更多...
jupyter里怎么设置代理下载模型

jupyter里怎么设置代理下载模型

使用如下方式: %env http_proxyhttp://10.110.146.100:7890 %env https_proxyhttp://10.110.146.100:7890
阅读更多...
【SLAM】GNSS的定义，信号原理以及RTK在多传感器融合中的使用方法

【SLAM】GNSS的定义，信号原理以及RTK在多传感器融合中的使用方法

【SLAM】GNSS的定义&#xff0c;信号原理以及在多传感器融合中的使用方法 1. GNSS的定义2. GNSS信号原理3. RTK - Real Time Kinematic4。 如何使用RTK做融合和优化 1. GNSS的定义 GPS&#xff08;Global Positioning System&#xff09;和GNSS&#xff08;Global Navigation …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023