Vue3 - 路由 Vue-router 4.X（配置与使用教程）

news2024/11/24 22:34:21

目录

    • 前言
    • 安装配置
    • 准备工作
    • 配置路由
    • 基本使用
    • 路由传参 1
    • 路由传参 2
    • 路由传参 3
    • SEO

前言

在咱们 Vue2 时代，官方推荐咱们使用 vue-router 3.X 的库，如果是用脚手架创建的话，就直接默认集成到里面了。

Vue3 使用的是 vue-router 4.X 官方库，学习成本并不高。

安装配置

我们正式开始在 Vue3 中尝试手动从 0-1 配置好路由。

在项目终端，执行如下命令：

cnpm install vue-router@4 -S

咱们搞个 -S 写到咱们的 package.json 下 dependencies 字段中，以后项目安装依赖时会自动安装。

在这里插入图片描述
安装完毕后，打开 package.json 文件，可以看到已经有了。

在这里插入图片描述

好，安装成功了。

准备工作

先随便整俩页面，后续测试使用。

在 src 目录下新建 view 文件夹，用来存放咱们的页面。

在这里插入图片描述

紧接着，在里面再建立两个页面，分别是 index.vue 和 details.vue，首页和详情页。

在这里插入图片描述

打开 index.vue 写入以下内容。

<template>
    <div>index.vue</div>
</template>

打开 details.vue 写入以下内容。

<template>
    <div>details.vue</div>
</template>

配置路由

创建好测试页面后，咱们开始配置路由。

在 src 目录下，新建 router 文件夹，接着在里面建立 index.js 与 routes.js 文件。

在这里插入图片描述

咱们打开 router.js ，在里面写好页面路由表配置。

// 路由表(一个首页, 一个详情页)
const routes = [
    {
        name: 'index',
        path: '/',
        component: () => import('../view/index.vue')
        // 注意不能使用 "@/view/index.vue"
        // vite 不识别的, 会出现找不到模块的情况
    },
    {
        name: 'details',
        path: '/details',
        component: () => import('../view/details.vue')
    },
]

export default routes

配置好页面后，咱们打开 index.js 文件，做一下路由配置。

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

// 通过 createRouter 创建路由实例
// history: 用于路由实现历史记录, 
// 参数值为历史记录模式, 通过使用官方为我们提供方法(createWebHistory)即可。
const router = createRouter({
    // createWebHistory 创建history路由模式
	// createWebHashHistory 创建hash路由模式
	// createMemoryHistory 创建基于内存的历史记录
    history: createWebHistory(),
    // 路由表
    routes
})

export default router

打开 这个文档，里面有更多配置。

好，配置工作完成，最后一步就是在 main.js 入口文件通过 use 引入注册。

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

// 使用 createPinia 创建Pinia实例
import { createPinia } from 'pinia'

// 引入路由
import router from './router/index.js'

const app = createApp(App)

// use
app.use(createPinia())

// 注意: use 要在 mount 之前进行
app.use(router)
// 另外,这块可以采用链式调用
// 比如: createApp(App).use(router).mount('#app')

app.mount('#app')

好了，所有配置工作就完成了。

基本使用

其实与 Vue2 中配套的 Vue-router 3.X 用法基本相同！

先来实现一下编程式与常规式跳转页面，说白了就是一个用 <router-link> 标签跳转，一个是用 JS 跳转。

随便找个页面，用 App.vue 也行，写入以下代码：

<template>
  <button @click="toPage()">详情页(编程式跳转)</button> |
  <router-link to="/">首页(常规式跳转)</router-link>
  <router-view />
</template>

<script setup>
// 引入路由(Vue2的话直接无脑this就行,Vue3不行了)
// useRouter 会返回 router 实例,
// 相当于在模板中使用 $router
// 注意: 必须在 setup() 中调用
import { useRouter } from 'vue-router'
const router = useRouter()

// 另外, 如果需要 "返回当前路由地址"
// 注意啊, 俩单词拼写非常相近, 别搞错了
// import { useRoute } from 'vue-router'

// 跳转页面
const toPage = () => {
  // 老配方
  console.log(router)
  // 通过老规矩push函数进行页面跳转
  // 参数: 要跳转的页面path路径
  router.push('/details')
}
</script>

很简单，也很理解，只不过与 Vue2 稍微有那么一些差异。

在这里插入图片描述

路由传参 1

首先传参和接收参数的语法不同，另外还有一些注意的地方。

<!-- 传递一些字符串、数值等一些简单的参数 -->
<template>
  <!-- 常规方式 -->
  <router-link :to="`/details?name=${name}`">去详情页</router-link>
  <!-- 编程方式 -->
  <button @click="toPage()">去详情页</button>
  <router-view />
</template>

<script setup>
// 引入路由实例
import { useRouter } from 'vue-router'
const router = useRouter()

// 要传递的参数
const name = '我是沙雕'

// 去详情页
const toPage = () => {
  router.push(`/details?name=${name}`)
}
</script>

可以看到，已经传递过去了。

在这里插入图片描述

那么参数传过去了，目标路由页面该怎么接收呢？

咱们打开详情 details.vue 页面，来接收一下参数。

<template>
    <div>details.vue</div>
    <h1>{{ name }}</h1>
</template>

<script setup>
// 第一步: 引入路由实例并实例化
// 注意: 在 <setup> 语法糖下, 必须放在顶部, 否则作用域改变就是undefined了
import { useRouter } from 'vue-router'
const router = useRouter()

// 第二步: 接收参数
const name = router.currentRoute.value.query.name
console.warn(name)
</script>

<!-- 另外, 通过 useRoute 和 toRaw 也能取到参数 -->
<!-- 大部分情况下, 我们拿到路由实例就行了, 基本上啥事都能做了 -->
<!-- import { useRoute, toRaw } from 'vue-router' -->
<!-- console.log('参数:', toRaw(route).query.value) -->

另外呢，咱们除了参数，还能拿到一些额外的参数。

加入打印代码：

console.log(router.currentRoute)

在这里插入图片描述

看，能得到页面路径等一些信息。

路由传参 2

前面看了简单的数据传参，这块来看一下传递复杂参数，数组、对象。

<!-- 传递一些对象/数组/map等参数 -->
<template>
  <!-- 常规方式 -->
  <router-link :to="{
    path: '/details',
    query: { name: '蔡徐坤', age: 213 }
  }">去详情页</router-link>
  <!-- 编程方式 -->
  <button @click="toPage()">去详情页</button>
  <router-view />
</template>

<script setup>
// 引入路由实例
import { useRouter } from 'vue-router'
const router = useRouter()

// 要传递的参数
const query = {
   name: '蔡徐坤',
   age: 213
}

// 去详情页
const toPage = () => {
  router.push({
    path: '/details',//路径
    query: query//参数
  })
}
</script>

在这里插入图片描述

好，可以看到成功携带了参数。

那么参数传过去了，目标路由页面该怎么接收呢？

在接收之前呢，推荐大家通过配置路由表 props 属性的形式，完成更骚的操作。

具体怎么做呢，咱们打开 router -> routes.js 路由表文件。

在要接收对象参数的配置项中，加入以下代码。

// 路由表(一个首页, 一个详情页)
const routes = [
    {
        name: 'index',
        path: '/',
        component: () => import('../view/index.vue')
        // 注意不能使用 "@/view/index.vue"
        // vite 不识别的, 会出现找不到模块的情况
    },
    {
        name: 'details',
        path: '/details',
        component: () => import('../view/details.vue'),
        props(route) {
            // route: 路径/参数啥都有
            console.log(route)
        }
    },
]

export default routes

当我们跳转到该页时，这个 props 就会自动执行，里面啥都有，可以做一些其他事情。

在这里插入图片描述

来，咱们打开 index.js 路由表，接着来写。

// 路由表(一个首页, 一个详情页)
const routes = [
    {
        name: 'index',
        path: '/',
        component: () => import('../view/index.vue')
        // 注意不能使用 "@/view/index.vue"
        // vite 不识别的, 会出现找不到模块的情况
    },
    {
        name: 'details',
        path: '/details',
        component: () => import('../view/details.vue'),

        // 另外 也能用多级es6对象解构 props({query:{name}}) { ... }
        props(route) {
            // route: 路径/参数啥都有
            // console.log(route)
            // 当路由执行到该项时, 自定义一些操作
            return route.query
        }
    },
]

export default routes

好，注意啊，正题开始。

咱们打开详情 details.vue 页面，来接收一下参数。

<template>
    <!-- 注意这块必须有一个根节点 -->
    <!-- 不信你就把外层div删掉试试 -->
    <div>
        <div>details.vue</div>
        <div>{{ query }}</div>
    </div>
</template>

<script setup>
// 第一步: 引入并创建路由实例
import { useRoute } from 'vue-router'
const route = useRoute()

// 第二步: 获取参数
const query = route.query
console.log(query)
</script>

在这里插入图片描述

路由传参 3

前面两个小节讲了：

  • 普通的数值、字符串传参与接收。
  • 复杂的对象、数组传参与接收。

大家回顾一下，咱们在复杂对象的传参时，是怎么写的。

先看这段代码：

router.push({
  path: '/details',//路径
  query: { name: '我爱你' }//参数
})

可以看到啊，咱们前面，路径那一块用的是 path 属性，也就是说对应路由表的 path 属性，如图。

在这里插入图片描述

其实这块，咱们还可以使用 name 属性，学过 Vue2 的都知道，没学过的呢，接着往下看。

另外，这个 query 属性，对应的是咱们要传递的参数数据。

与之对应的还有一个属性，它叫 param 属性，这玩意也是用来接收要传递的参数数据的。

但是呢，这俩属性别看都是用来传递参数的， Vue 分成了俩，就一定有它的道理。

// name + param
// params 传参数 (类似post)
// 路由配置path: "/index/:id" 或者 path: "/index:id",
// 不配置path, 第一次可请求, 刷新页面id会消失(刷新参数不会保留！)
// 配置path, 刷新页面id会保留(刷新参数会保留)
// 注意: 使用name别名跳转，必须要在路由中配置该别名，否则无效。
router.push({ name:'index', params: {id: '1'} })

// path + query
// query传参数 (类似get, 浏览器地址url后面会显示参数)
// 路由path可不配置
// 刷新页面id会保留(刷新参数会保留)
router.push({ path:'/index', query: {id:'1'} })

// 不难看出，携带参数路由跳转分别是 query / params ，前面也阐述了，非常类似 get / post，
// 其实 “直观” 的区别是 query 方式会在浏览器地址栏（URL）上显示参数，
// 而 params 则与之相反，不会显示参数。

SEO

vue3 路由官方文档，vue3 路由文档，vue-router4 官方文档，使用Vite构建Vue3项目,对路由Vue Router，Vue3中 Vue Router4路由的配置，vue3-vueRouter v4.x， vue3 中 vue-router4 基本使用(路由基本配置)，Vue3 - Router@4.x使用，vue-router4.x教程，Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3) ，10分钟快速上手VueRouter4.x教程，Vue3-router4的使用，vue3.0 router(v4.X)使用，Vue3使用路由VueRouter4的简单示例，Vue 3 中基于 vue-router 4 的路由配置与使用，vue3 vue-router4安装和基础使用，Vue3 - 路由 Vue-router 4.X（配置与使用教程）。

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

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

相关文章

[附源码]计算机毕业设计JAVA小超市进销存管理系统

[附源码]计算机毕业设计JAVA小超市进销存管理系统

[附源码]计算机毕业设计JAVA小超市进销存管理系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM my…
阅读更多...
m扩频通信系统在瑞利信道中的误码率性能matlab仿真

m扩频通信系统在瑞利信道中的误码率性能matlab仿真

目录 1.算法描述 2.matlab算法仿真效果 3.MATLAB核心程序 4.完整MATLAB 1.算法描述 本课题&#xff0c;我们主要涉及到两个理论要点&#xff0c;第一个是瑞利衰落条件&#xff0c;第二个是扩频通信。下面分别对这两个理论进行介绍&#xff1a; 第一个是瑞利衰落条件&#x…
阅读更多...
我们又重写了一个关键服务

我们又重写了一个关键服务

#01 QueryCoord 组件介绍 QueryCoord 是 Milvus 中查询集群的中心调度节点&#xff0c;在用户将一个 Collection Load 到内存中时&#xff0c;QueryCoord 负责将该 Collection 的 Segment 调度到 QueryNode 集群中&#xff0c;以支持后续的查询。 QueryCoord 最核心的操作有4…
阅读更多...
将egg项目部署至服务器

将egg项目部署至服务器

文章目录1.下载linux版本的node-v162.将node安装包从自己电脑上上传到自己的服务器3.在服务器中解压压缩包4.配置环境变量5.使文件生效6.将egg项目传到服务器指定目录下7.下载依赖8.npm start 运行不会占用终端 并且一直在运行 可以使用npm stop停用9.最后使用云服务器ip:端口号…
阅读更多...
Linux22 --- 网络为什么要分层、使用tcp协议实现两个进程间通信的功能、IP地址转换函数

Linux22 --- 网络为什么要分层、使用tcp协议实现两个进程间通信的功能、IP地址转换函数

一、网络为什么要分层 1 1、分层的优点 1&#xff09;各层之间是独立的。某一层并不需要知道它的下一层是如何实现的&#xff0c;而仅仅需要知道该层通过层间的接口&#xff08;即界面&#xff09;所提供的服务。由于每一层只实现一种相对独立的功能&#xff0c;因而可将一个…
阅读更多...
Linux-Hadoop集群配置

Linux-Hadoop集群配置

文章目录一、配置Hadoop集群1、在master虚拟机上配置hadoop&#xff08;1&#xff09;编辑Hadoop环境配置文件 - hadoop-env.sh&#xff08;2&#xff09;编辑Hadoop核心配置文件 - core-site.xml&#xff08;3&#xff09;编辑HDFS配置文件 - hdfs-site.xml&#xff08;4&…
阅读更多...
1542_AURIX_TC275_CPU子系统_内核

1542_AURIX_TC275_CPU子系统_内核

全部学习汇总&#xff1a; GreyZhang/g_TC275: happy hacking for TC275! (github.com) 我因为看了这个章节的开篇有些疑惑去看了内核手册&#xff0c;现在学习的进程终于又重新回归&#xff0c;回到了TC275这个MCU的学习上。 这里的几条笔记记录是隔了很久写的&#xff0c;前面…
阅读更多...
【Java面试】HashMap死循环问题

【Java面试】HashMap死循环问题

问题 最近几道面试题被问了是否了解并发情况下JDK7中HashMap发生死循环&#xff0c;导致CPU占用100%的问题。 由于HashMap并非是线程安全的&#xff0c;所以在高并发的情况下必然会出现问题&#xff0c;这是一个普遍的问题。 如果是在单线程下使用HashMap&#xff0c;自然是没…
阅读更多...
[MAUI] 开篇-初识MAUI

[MAUI] 开篇-初识MAUI

前言 在2020年5月, 微软宣布了MAUI跨平台框架, MAUI 是Xamarin.Forms演变而来, 这也就意味着, 如果你原来具备Xamarin.Forms开发经验, 你可以流畅的过渡到MAUI开发当中。 原本于2021年底发布的MAUI正式版被推迟到了2022年5月底发布。现在, 你目前可以通过安装VS2022 预览版进行…
阅读更多...
Elasticsearch倒排索引

Elasticsearch倒排索引

什么是正排索引&#xff1f; 如下图&#xff0c;有一张商品表&#xff08;tb_goods&#xff09;&#xff1a; 对于mysql数据库来说&#xff0c;肯定会给“id”创建主键索引&#xff0c;然后根据“id”来查询对应的商品信息&#xff0c;而这种情况就被称为“正排索引” 现在有…
阅读更多...
eMagin：当月产百万片时，4K MicroOLED成本将不是问题

eMagin：当月产百万片时，4K MicroOLED成本将不是问题

在今年2022 SID显示周期间&#xff0c;Micro OLED微显示模组厂商eMagin曾展示一款专为超短焦VR头显开发的4K Micro OLED微显示屏&#xff0c;有趣的是&#xff0c;该显示屏连接的主板上印有STEAMBOAT字样&#xff0c;让人不禁怀疑它与Valve之间是否存在某种联系。甚至有猜测认为…
阅读更多...
【Linux】8.0 多线程

【Linux】8.0 多线程

文章目录1.0 Linux线程概念1.1 Linux线程基本概念1.2 Linux线程优劣介绍2.0 Linux线程控制2.1 pthread_create(创建线程)2.2 pthread_join(线程等待)2.3 pthread_exit(线程终止)2.4 pthread_detach(线程分离)3.0 线程id和LWP的关系4.0 Linux线程互斥4.1 线程互斥相关概念4.2 线…
阅读更多...
JUC系列(五) 读写锁与阻塞队列

JUC系列(五) 读写锁与阻塞队列

&#x1f4e3; &#x1f4e3; &#x1f4e3; &#x1f4e2;&#x1f4e2;&#x1f4e2; ☀️☀️你好啊&#xff01;小伙伴&#xff0c;我是小冷。是一个兴趣驱动自学练习两年半的的Java工程师。 &#x1f4d2; 一位十分喜欢将知识分享出来的Java博主⭐️⭐️⭐️&#xff0c;擅…
阅读更多...
Qt第二十六章：Nuitka打包教程

Qt第二十六章：Nuitka打包教程

Nuitka环境安装 ①下载gcc文件。提取码&#xff1a;8888百度网盘 请输入提取码 ②解压nuitka1.0.6版本&#xff0c;我们解压64位的。 ③设置环境变量 ④检测一下 gcc.exe --version 安装nuitka pip install nuitka pip install ordered-set 防止环境变量不生效&#xff0c;…
阅读更多...
【Redis】Redis介绍

【Redis】Redis介绍

文章目录1.NoSQL数据库1.1NoSQL适用场景1.2常用的NoSQL1.3Redis介绍1.4Redis的使用场景1.5Redis默认按照目录1.6Redis的启动1.7Redis是单线程多路IO复用技术1.NoSQL数据库 NoSQL(NoSQL Not Only SQL )&#xff0c;意即“不仅仅是SQL”&#xff0c;泛指非关系型的数据库。 NoS…
阅读更多...
学生HTML个人网页作业作品 (服装商城HTML+CSS)

学生HTML个人网页作业作品 (服装商城HTML+CSS)

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业&#xff0c;Web大学生网页 HTML&a…
阅读更多...
RK3588平台开发系列讲解（Pinctrl篇）Pinctrl设备树介绍

RK3588平台开发系列讲解（Pinctrl篇）Pinctrl设备树介绍

平台内核版本安卓版本RK3588Linux 5.10Android12🚀返回专栏总目录 文章目录 一、 DTS介绍二、新建pinctrl三、引用pinctrl沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇将介绍pinctrl设备树的使用方法。 一、 DTS介绍 RK芯片的设备树⼀般把pinctrl节点放在soc…
阅读更多...
元宇宙数字藏品，打造数字经济产业，实现全新业态升级

元宇宙数字藏品，打造数字经济产业，实现全新业态升级

《中华人民共和国国民经济和社会发展第十四个五年规划和2035年远景目标纲要》提出以数字化转型整体驱动生产方式、生活方式和治理方式变革&#xff0c;催生新产业新业态新模式&#xff0c;壮大经济发展新引擎&#xff0c;将“虚拟现实和增强现实”列入了数字经济重点产业。 而自…
阅读更多...
GAN生成漫画脸

GAN生成漫画脸

最近对对抗生成网络GAN比较感兴趣&#xff0c;相关知识点文章还在编辑中&#xff0c;以下这个是一个练手的小项目~ (在原模型上做了&#xff0c;为了减少计算量让其好训练一些。) 一、导入工具包 import tensorflow as tf from tensorflow.keras import layersimport numpy a…
阅读更多...
tinymce富文本编辑器做评论区

tinymce富文本编辑器做评论区

今天分享一下tinymce富文本编辑器做评论区的全过程。 文章目录一、介绍1.最终效果2.功能介绍3.主要项目包版本介绍&#xff1a;二、每个功能的实现1.自定义toolbar的功能区①对应的样式以及意义②对应的代码实现【忽略了一切非实现该功能的代码】2.展示、收起评论区①对应的样式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023