Vue Router 详细使用步骤：如何在 Vue 项目中配置 Vue Router

news2024/11/7 2:35:05

前言

Vue Router 是 Vue.js 官方提供的路由管理工具，它能够帮助我们创建单页应用程序（Single Page Application，SPA）。在 SPA 中，尽管看起来像是有多个页面，但实际上只有一个 HTML 文件，不同的“页面”只是通过路由来切换不同的组件。这种方式不仅提升了用户体验，还优化了应用性能。接下来，我们将一步步地探讨如何在 Vue 项目中配置和使用 Vue Router。

什么是 Vue Router？

Vue Router 是 Vue.js 官方的路由管理工具。简单来说，它能帮你创建单页应用程序（Single Page Application，SPA）。在 SPA 中，虽然看起来像是有多个页面，但实际上只有一个 HTML 文件，不同的“页面”只是通过路由来切换不同的组件。

使用步骤

1. 依赖安装

在开始之前，我们需要确保你的 Vue 项目中已经安装了 Vue Router。如果还没有安装，可以通过以下命令来安装：

npm install vue-router@next

2. 创建 Router 文件

首先，在 src 目录下创建一个名为 router 的文件夹，并在里面创建一个 index.js 文件。这个文件将用于定义我们的路由规则。

// src/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(process.env.BASE_URL),
  routes
});

export default router;

3. 在主文件中注册 Router

接下来，我们需要在 Vue 项目的入口文件（通常是 main.js 或 main.ts）中注册我们的路由。

// src/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');

4. 创建视图组件

在 src/views 目录下创建两个组件：Home.vue 和 About.vue。这些组件代表我们的两个页面。

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

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

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
  </div>
</template>

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

5. 使用 Router 进行导航

我们已经配置好了基本的路由。接下来，我们需要在应用中添加导航链接来切换不同的路由。
1. 更新 App.vue
在 App.vue 文件中，添加导航链接和路由出口。

<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

<style>
nav {
  margin-bottom: 20px;
}
nav a {
  margin-right: 10px;
}
</style>

2. 测试导航
运行开发服务器：

npm run serve

打开浏览器，访问 http://localhost:8080，你会看到一个包含两个导航链接的页面。点击“Home”和“About”链接，你会发现页面内容会相应地切换。

高级用法

1. 动态路由匹配

有时候，我们需要在路由中使用动态参数。例如，你在构建博客应用，每个博客文章都有一个唯一的 ID。我们可以在路由中使用动态参数来实现这一点。
首先，我们定义一个动态路由：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Post from '../views/Post.vue'; // 新增 Post 组件

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/post/:id', name: 'Post', component: Post } // 动态路由
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

接下来，我们创建 Post.vue 组件：

<!-- src/views/Post.vue -->
<template>
  <div>
    <h1>Post Page</h1>
    <p>Post ID: {{ $route.params.id }}</p>
  </div>
</template>

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

在这个示例中，当我们访问 /post/123 时，Post.vue 组件将显示 “Post ID: 123”。

2. 嵌套路由

嵌套路由允许你在某个路由下再嵌套子路由。这对于复杂的应用结构特别有用。
我们先修改路由配置：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Post from '../views/Post.vue';
import User from '../views/User.vue'; // 新增 User 组件
import UserProfile from '../views/UserProfile.vue'; // 新增 UserProfile 组件
import UserPosts from '../views/UserPosts.vue'; // 新增 UserPosts 组件

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/post/:id', name: 'Post', component: Post },
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

接着，我们创建相应的组件：

<!-- src/views/User.vue -->
<template>
  <div>
    <h1>User Page</h1>
    <p>User ID: {{ $route.params.id }}</p>
    <router-link :to="{ name: 'UserProfile', params: { id: $route.params.id } }">Profile</router-link>
    <router-link :to="{ name: 'UserPosts', params: { id: $route.params.id } }">Posts</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'User'
};
</script>
<!-- src/views/UserProfile.vue -->
<template>
  <div>
    <h2>User Profile</h2>
  </div>
</template>

<script>
export default {
  name: 'UserProfile'
};
</script>
<!-- src/views/UserPosts.vue -->
<template>
  <div>
    <h2>User Posts</h2>
  </div>
</template>

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

3. 导航守卫

导航守卫可以帮助你在路由切换时控制访问权限或执行一些特定的逻辑。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫。

全局守卫

// src/router/index.js
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

全局前置守卫

router.beforeEach((to, from, next) => {
  if (to.path === '/about' && !isLoggedIn()) {
    next('/'); // 如果用户未登录且试图访问 /about 页面，则重定向到首页
  } else {
    next(); // 继续导航
  }
});

export default router;

路由独享守卫

// src/router/index.js
const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    beforeEnter: (to, from, next) => {
      if (!isLoggedIn()) {
        next('/');
      } else {
        next();
      }
    }
  }
];

组件内守卫

// src/views/About.vue
<script>
export default {
  name: 'About',
  beforeRouteEnter(to, from, next) {
    if (!isLoggedIn()) {
      next('/');
    } else {
      next();
    }
  }
};
</script>

4. 懒加载

为了优化应用性能，尤其是大型应用，我们可以通过懒加载来按需加载组件。

// src/router/index.js
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
];

这样，当用户访问某个路由时，才会加载对应的组件，从而减少初始加载时间。

5. 编程式导航

在实际开发中，除了使用 进行导航外，我们还会遇到需要在代码中通过某些操作来进行路由跳转的情况。Vue Router 提供了编程式导航的方式，可以通过调用 $router 实例的方法来实现。

使用 this.$router.push
push 方法会向 history 栈添加一个新的记录，点击浏览器的回退按钮可以回到之前的页面。

// 组件内部
methods: {
  goToAbout() {
    this.$router.push({ name: 'About' });
  }
}
<!-- 组件模板 -->
<button @click="goToAbout">Go to About</button>

使用 this.$router.replace
replace 方法与 push 类似，不同的是它不会向 history 栈添加新记录，而是替换当前的记录。

methods: {
  goToAbout() {
    this.$router.replace({ name: 'About' });
  }
}

使用 this.$router.go
go 方法允许你在 history 栈中前进或后退指定的步数。

methods: {
  goBack() {
    this.$router.go(-1); // 后退一步
  },
  goForward() {
    this.$router.go(1); // 前进一步
  }
}
<!-- 组件模板 -->
<button @click="goBack">Go Back</button>
<button @click="goForward">Go Forward</button>

6. 滚动行为控制

在单页应用中，切换路由时控制页面的滚动行为是一个常见需求。Vue Router 提供了 scrollBehavior 选项，可以用来控制路由切换时页面的滚动行为。

定义滚动行为
在 router/index.js 中，添加 scrollBehavior 选项：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      // savedPosition 记录了用户点击回退/前进按钮时保存的滚动位置
      return savedPosition;
    } else {
      // 新路由默认滚动到顶部
      return { top: 0 };
    }
  }
});

7. 路由元信息

有时，我们需要为路由添加一些自定义的数据，例如访问权限控制、标题等。Vue Router 允许你在路由配置中添加 meta 字段。

定义路由元信息
在 router/index.js 中为路由添加 meta 字段：

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

使用路由元信息
在全局守卫中使用 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这里处理需要登录的逻辑
    if (!isLoggedIn()) {
      next('/');
    } else {
      next();
    }
  } else {
    next();
  }
});

8. 路由懒加载与代码分割

通过上面介绍的懒加载，我们可以实现代码分割，从而优化应用性能。对于大型应用，进一步的优化是非常必要的。
配置 webpackChunkName
通过指定 webpackChunkName，我们可以将某些路由部分分割到同一个异步块中。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home-about" / '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
*    component: () => import(/* webpackChunkName: "home-about" */ '../views/About.vue')
  }
];

通过这种方式，可以更好地控制代码分割，提高应用性能。

总结

Vue Router 是一个强大且灵活的工具，它不仅能满足我们在开发单页应用中遇到的各种需求，还能帮助我们构建复杂且结构合理的前端应用程序。通过本教程，我们从基础到高级，详细介绍了 Vue Router 的使用方法和最佳实践。我们学习了如何配置路由、实现导航、处理动态参数、嵌套路由、使用导航守卫、实现懒加载、以及控制滚动行为等高级用法。

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

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

相关文章

copilot教我学408---OS之文件管理

copilot教我学408---OS之文件管理

四、文件管理 (一)文件 1.文件的基本概念 2.文件元数据和索引节点(inode) 3.文件的操作 建立,删除,打开,关闭,读,写 4.文件的保护 5.文件的逻辑结构 6.文件的物理结构 (二)目录 1.目录的基本概念 2.树形目录 3.目录的操作 4.硬链接和软链接 (三)文件系统 1.文件系统的全局结构(…
阅读更多...
论文阅读笔记：Activating More Pixels in Image Super-Resolution Transformer

论文阅读笔记：Activating More Pixels in Image Super-Resolution Transformer

论文阅读笔记&#xff1a;Activating More Pixels in Image Super-Resolution Transformer 1 背景1.1 问题1.2 提出的方法 2 创新点3 方法4 模块4.1 混合注意力模块&#xff08;HAB&#xff09;4.2 重叠交叉注意力模块&#xff08;OCAB&#xff09;4.3 同任务预训练 5 效果5.1 …
阅读更多...
导师双选系统开发：Spring Boot技术详解

导师双选系统开发：Spring Boot技术详解

第一章 绪论 1.1 选题背景 如今的信息时代&#xff0c;对信息的共享性&#xff0c;信息的流通性有着较高要求&#xff0c;尽管身边每时每刻都在产生大量信息&#xff0c;这些信息也都会在短时间内得到处理&#xff0c;并迅速传播。因为很多时候&#xff0c;管理层决策需要大量信…
阅读更多...
关于wordpress instagram feed 插件 （现更名为Smash Balloon Social Photo Feed）

关于wordpress instagram feed 插件 （现更名为Smash Balloon Social Photo Feed）

插件地址&#xff1a; Smash Balloon Social Photo Feed – Easy Social Feeds Plugin – WordPress 插件 | WordPress.org China 简体中文 安装后&#xff0c;配置教程&#xff1a; Setting up the Instagram Feed Pro WordPress Plugin - Smash Balloon 从这里面开始看就…
阅读更多...
Redis学习：BitMap/HyperLogLog/GEO案例 、布隆过滤器BloomFilter、缓存预热+缓存雪崩+缓存击穿+缓存穿透

Redis学习：BitMap/HyperLogLog/GEO案例 、布隆过滤器BloomFilter、缓存预热+缓存雪崩+缓存击穿+缓存穿透

Redis学习 文章目录 Redis学习1、BitMap/HyperLogLog/GEO案例2. 布隆过滤器BloomFilter3. 缓存预热缓存雪崩缓存击穿缓存穿透 1、BitMap/HyperLogLog/GEO案例 真实需求面试题 亿级数据的收集清洗统计展现对集合中数据进行统计&#xff0c;基数统计&#xff0c;二值统计&#xf…
阅读更多...
基于Python的智能旅游推荐系统设计与实现

基于Python的智能旅游推荐系统设计与实现

一、摘要 本毕业设计的内容是设计并且实现一个基于Python技术的智能旅游推荐系统。它是在Windows下&#xff0c;以MYSQL为数据库开发平台&#xff0c;使用Python技术进行设计。智能旅游推荐系统的功能已基本实现&#xff0c;主要实现首页&#xff0c;个人中心&#xff0c;用户…
阅读更多...
从零开始的c++之旅——多态

从零开始的c++之旅——多态

1. 多态的概念 通俗来说就是多种形态。 多态分为编译时多态&#xff08;静态多态&#xff09;和运行时多态&#xff08;动态多态&#xff09;。 编译时多态主要就是我们之前提过的函数重载和函数模板&#xff0c;同名提高传不同的参数就可以调 用不同的函数&#xff0c…
阅读更多...
第二十六章 Vue之在当前组件范围内获取dom元素和组件实例

第二十六章 Vue之在当前组件范围内获取dom元素和组件实例

目录 一、概述 二、获取dom 2.1. 具体步骤 2.2. 完整代码 2.2.1. main.js 2.2.2. App.vue 2.3. BaseChart.vue 三、获取组件实例 3.1. 具体步骤 3.2. 完整代码 3.2.1. main.js 3.2.2. App.vue 3.2.3. BaseForm.vue 3.3. 运行效果 一、概述 我们过去在想要获取一…
阅读更多...
plt中subplot综合实战

plt中subplot综合实战

目录 背景介绍实战 背景介绍 下面是一份贸易数据&#xff08;Prod_Trade.xlsx&#xff09;&#xff0c;需要多角度针对2012年数据进行报表分析&#xff0c;需使用subplot分格展示。Prod_Trade的数据结构包括 Date,Order_Class,Sales Transport,Trans_Cost, Region ,Category, …
阅读更多...
DevOps开发运维简述

DevOps开发运维简述

DevOps平台是一套集成的解决方案&#xff0c;旨在协调软件开发&#xff08;Development&#xff09;和信息技术运维&#xff08;Operations&#xff09;。它促进跨功能团队合作&#xff0c;实现自动化流程&#xff0c;确保持续集成与持续交付&#xff08;CI/CD&#xff09;。 一…
阅读更多...
基于java+SpringBoot+Vue的微服务在线教育系统设计与实现

基于java+SpringBoot+Vue的微服务在线教育系统设计与实现

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven mysql5.7或8.0等等组成&#x…
阅读更多...
粒子群优化双向深度学习！PSO-BiTCN-BiGRU-Attention多输入单输出回归预测

粒子群优化双向深度学习！PSO-BiTCN-BiGRU-Attention多输入单输出回归预测

粒子群优化双向深度学习&#xff01;PSO-BiTCN-BiGRU-Attention多输入单输出回归预测 目录 粒子群优化双向深度学习&#xff01;PSO-BiTCN-BiGRU-Attention多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现PSO-BiTCN-BiGRU-Attention粒子…
阅读更多...
终端文件管理神器 !!!

终端文件管理神器 !!!

项目简介 nnn是一款专为命令行爱好者打造的高效终端文件管理器。它以其超小的体积、几乎零配置的要求以及卓越的速度表现而著称。nnn不仅适用于Linux、macOS、BSD等操作系统&#xff0c;还能够在诸如树莓派、Android上的Termux、WSL、Cygwin等多个平台运行。它遵循POSIX标准&am…
阅读更多...
Uniapp 实现app自动检测更新/自动更新功能

Uniapp 实现app自动检测更新/自动更新功能

实现步骤 配置 manifest.json 在 manifest.json 中设置应用的基本信息&#xff0c;包括 versionName 和 versionCode。 一般默认0.0.1&#xff0c;1. 服务器端接口开发 提供一个 API 接口&#xff0c;返回应用的最新版本信息&#xff0c;版本号、下载链接。客户端检测更新 使…
阅读更多...
基础算法——排序算法（冒泡排序，选择排序，堆排序，插入排序，希尔排序，归并排序，快速排序，计数排序，桶排序，基数排序，Java排序）

基础算法——排序算法（冒泡排序，选择排序，堆排序，插入排序，希尔排序，归并排序，快速排序，计数排序，桶排序，基数排序，Java排序）

1.概述 比较排序算法 算法最好最坏平均空间稳定思想注意事项冒泡O(n)O( n 2 n^2 n2)O( n 2 n^2 n2)O(1)Y比较最好情况需要额外判断选择O( n 2 n^2 n2)O( n 2 n^2 n2)O( n 2 n^2 n2)O(1)N比较交换次数一般少于冒泡堆O( n l o g n nlogn nlogn)O( n l o g n nlogn nlogn)O( n l…
阅读更多...
多元数据库时代，云和恩墨携手鲲鹏引领数据库一体机新变革

多元数据库时代，云和恩墨携手鲲鹏引领数据库一体机新变革

近年来&#xff0c;随着企业数据存储结构日益多元化&#xff0c;传统架构数据库面临发展瓶颈&#xff0c;越来越多企业倾向于采用不同类型的数据库满足多样化的数据需求。这一趋势下&#xff0c;国内数据库市场呈现百花齐放的态势&#xff0c;产业加速迈入多元数据库时代。 作为…
阅读更多...
[SWPUCTF 2022 新生赛]Cycle Again -拒绝脚本小子，成为工具糕手

[SWPUCTF 2022 新生赛]Cycle Again -拒绝脚本小子，成为工具糕手

1.题目 打开&#xff0c;一张图片&#xff0c;一个压缩包 2.分析 图片丢进随波逐流中 发现第一部分的flag NSSCTF{41d769db- 丢进b神的工具中 爆出第二段flag 9f5d-455e-a458-8012ba3660f3} 两段进行拼接 NSSCTF{41d769db-9f5d-455e-a458-8012ba3660f3} 直接拿下 遥遥领…
阅读更多...
机场电子采购信息系统

机场电子采购信息系统

摘 要 互联网的发展&#xff0c;改变了人类原来繁琐的生活和消费习惯&#xff0c;人们的时间观念也在不断加强&#xff0c;所以各种信息系统的数量越来越多&#xff0c;方便了用户&#xff0c;用户习惯也发生了改变。对于传统的企业采购模式来说由于费用高、速度慢、不透明化…
阅读更多...
RabbitMQ设置消息过期时间

RabbitMQ设置消息过期时间

RabbitMQ设置消息过期时间 1、过期消息&#xff08;死信&#xff09;2、设置消息过期的两种方式2.1、设置单条消息的过期时间2.1.1、配置文件application.yml2.1.2、配置类RabbitConfig2.1.3、发送消息业务类service&#xff08;核心代码&#xff09;2.1.4、启动类2.1.5、依赖文…
阅读更多...
android数组控件Textview

android数组控件Textview

说明&#xff1a;android循环控件&#xff0c;注册和显示内容 效果图&#xff1a; step1: E:\projectgood\resget\demozz\IosDialogDemo-main\app\src\main\java\com\example\iosdialogdemo\TimerActivity.java package com.example.iosdialogdemo;import android.os.Bundl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023