【VUE基础】VUE3第七节—Vue Router路由基础

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

访问路径 ======> 组件

安装Vue Router

npm install vue-router
yarn add vue-router
pnpm add vue-router

在这里插入图片描述
在package.json文件中显示vue-router版本代表安装成功
在这里插入图片描述

Vue Router使用

路由配置文件如下：

//引入创建路由
import { createRouter, createWebHistory } from "vue-router";
//引入组件
import Home from "@/components/Home.vue";
import Poclist from "@/components/Poclist.vue";
import Portscan from "@/components/Portscan.vue";


//创建路由
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
        path:"/poclist",
        component:Poclist
    },
    {
        path:"/portscan",
        component:Portscan
    }
  ]
});

export default router

注册路由器插件
一旦创建了我们的路由器实例，我们就需要将其注册为插件，这一步骤可以通过调用 use() 来完成。

main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'

createApp(App).use(router).mount('#app')

或等价于：

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'

const app = createApp(App)

app.use(router)
app.mount('#app')

和大多数的 Vue 插件一样，use() 需要在 mount() 之前调用。

APP.vue

<template>
  <div class="app">
    <h3 class="title">Vue路由测试</h3>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/portscan" active-class="active">端口扫描</RouterLink>
      <RouterLink to="/poclist" active-class="active">POC列表</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="APP">
</script>

效果如下：
在这里插入图片描述

  1. 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。

  2. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
    在这里插入图片描述

不同的历史模式

在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。
共支持 HASH模式、Memory 模式、HTML5 模式

Hash 模式

hash 模式是用 createWebHashHistory() 创建的：

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。

例如：

http://127.0.0.1:4000/#/index

Memory 模式

Memory 模式不会假定自己处于浏览器环境，因此不会与 URL 交互也不会自动触发初始导航。这使得它非常适合 Node 环境和 SSR。它是用 createMemoryHistory() 创建的，并且需要你在调用 app.use(router) 之后手动 push 到初始导航。

import { createRouter, createMemoryHistory } from 'vue-router'
const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    //...
  ],
})

虽然不推荐，你仍可以在浏览器应用程序中使用此模式，但请注意它不会有历史记录，这意味着你无法后退或前进。

HTML5 模式（推荐）

用 createWebHistory() 创建 HTML5 模式，推荐使用这个模式：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id
不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。这就尴尬了。

不用担心： 要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。
具体配置可以参考官网：

https://router.vuejs.org/zh/guide/essentials/history-mode.html
例如Nginx：

location / {
  try_files $uri $uri/ /index.html;
}

这有一个注意事项。你的服务器将不再报告 404 错误，因为现在所有未找到的路径都会显示你的 index.html 文件。为了解决这个问题，你应该在你的 Vue 应用程序中实现一个万能的路由来显示 404 页面。

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }],
})

另外，如果你使用的是 Node.js 服务器，你可以通过在服务器端使用路由器来匹配传入的 URL，如果没有匹配到路由，则用 404 来响应，从而实现回退。

to的两种写法

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>

<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

命名路由

当创建一个路由时，我们可以选择给路由一个 name：
在这里插入图片描述
然后我们可以使用 name 而不是 path 来传递 to 属性给 ：

<router-link :to="{ name: 'profile', params: { username: 'erina' } }">
  User profile
</router-link>

所有路由的命名都必须是唯一的。如果为多条路由添加相同的命名，路由器只会保留最后那一条。

嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：

/user/johnny/profile                   /user/johnny/posts 
┌──────────────────┐                  ┌──────────────────┐
│ User             │                  │ User             │
│ ┌──────────────┐ │                  │ ┌──────────────┐ │
│ │ Profile      │ │  ●────────────▶  │ │ Posts        │ │
│ │              │ │                  │ │              │ │
│ └──────────────┘ │                  │ └──────────────┘ │
└──────────────────┘                  └──────────────────┘

通过 Vue Router，你可以使用嵌套路由配置来表达这种关系。
在这里插入图片描述

children 配置只是另一个路由数组，就像 routes 本身一样，所以支持不断地嵌套
当你访问不存在的路由时，例如/pocinfo/111，会显示空白。，因为没有匹配到嵌套路由。也许你确实想在那里渲染一些东西。在这种情况下，你可以提供一个空的嵌套路径：
在这里插入图片描述
在这里插入图片描述
嵌套路由也支持命名
可通过浏览器插件查看
在这里插入图片描述

路由传递参数

query参数

传递参数

<!-- 跳转并携带query参数（to的字符串写法） -->
<router-link to="/news/detail?a=1&b=2&content=欢迎你">
	跳转
</router-link>
				
<!-- 跳转并携带query参数（to的对象写法） -->
<RouterLink 
  :to="{
    //name:'xiang', //用name也可以跳转
    path:'/news/detail',
    query:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  }"
>
  {{news.title}}
</RouterLink>

接收参数：

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)

params参数

传递参数

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
				
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink 
  :to="{
    name:'xiang', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      content:news.title
    }
  }"
>
  {{news.title}}
</RouterLink>

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注2：传递params参数时，需要提前在规则中占位。

路由规则的props配置

布尔模式

当 props 设置为 true 时，route.params 将被设置为组件的 props。

const routes = [
  {
      name: "poclist",
      path: "/poclist",
      component: Poclist,
      children:[{
        name:"pocinfo",
        path:"pocinfo",
        component:Pocinfo,
        props:true
      }
]

Poclist.vue

 <RouterLink :to="{
          name: 'pocinfo',
          params:{
            id: pocs.id,
            title: pocs.title,
            content: pocs.content}
        }">
        {{ pocs.title }}
        </RouterLink>

Pocinfio.vue

<template>
    <ul class="news-list">
    <li>编号：{{ id }}</li>
    <li>标题：{{ title }}</li>
    <li>内容：{{ content }}</li>
  </ul>
</template>

<script setup lang='ts'>
// import { ref,reactive,toRefs} from 'vue'

// import { RouterView,useRoute } from 'vue-router'

defineProps(["id","title","content"])

在这里插入图片描述

replace属性

  1. 作用：控制路由跳转时操作浏览器历史记录的模式。

  2. 浏览器的历史记录有两种写入方式：分别为push和replace：

    - ```push```是追加历史记录（默认值）。
- `replace`是替换当前记录。

  3. 开启replace模式：

<RouterLink replace .......>News</RouterLink>

编程式导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

注意：如果提供了 path，params 会被忽略，如需要使用params是，需要提供路由的name 或手写完整的带有参数的 path ：

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

替换当前位置

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
在这里插入图片描述
也可以直接在传递给 router.push 的 to 参数中增加一个属性 replace: true ：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

重定向

重定向也是通过 routes 配置来完成，下面例子是从/ 重定向到 /home：

{
    path:'/',
    redirect:'/home'
}

在这里插入图片描述

别名

重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 /。那么什么是别名呢？

将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。

上面对应的路由配置为：

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

imazing电脑怎么下载 imazing怎么下载软件 使用iMazing下载和卸载Apple设备上的应用程序

imazing电脑怎么下载 imazing怎么下载软件 使用iMazing下载和卸载Apple设备上的应用程序

iMazing官方版是一款管理苹果设备的软件&#xff0c;是一款帮助用户管理 iOS手机的PC端应用程序&#xff0c;能力远超 iTunes 提供的终极 iOS 设备管理器。在iMazing官方版上与苹果设备连接后&#xff0c;可以轻松传输文件&#xff0c;浏览保存信息等&#xff0c;功能比iTunes更…
阅读更多...
rocketmq主从自动切换（Controller 嵌入 NameServer 部署）

rocketmq主从自动切换（Controller 嵌入 NameServer 部署）

rocketmq5以后&#xff0c;加入了主从自动切换的功能&#xff1a; 官网 https://rocketmq.apache.org/zh/docs/deploymentOperations/03autofailover 准备工作 1&#xff09;关闭将要升级的nameserver、master、slave 2&#xff09;复制master的store文件到其他两台机器&a…
阅读更多...
240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat 基于MindNLP和ChatGLM-6B实现一个聊天应用&#xff0c;本文进行简单记录。 环境配置 %%capture captured_output # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下面mi…
阅读更多...
通过高德地图 JS API实现单击鼠标进行标注

通过高德地图 JS API实现单击鼠标进行标注

效果图： 核心代码： <template><a-modal title="选择地图所在位置" :width="width" :visible="visible" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"><div class="location-…
阅读更多...
Flutter——最详细(Badge)使用教程

Flutter——最详细(Badge)使用教程

背景 主要常用于组件叠加上圆点提示&#xff1b; 使用场景&#xff0c;消息数量提示&#xff0c;消息红点提示 属性作用backgroundColor红点背景色smallSize设置红点大小isLabelVisible是否显示offset设置红点位置alignment设置红点位置child设置底部组件 代码块 class Badge…
阅读更多...
【Elasticsearch】开源搜索技术的演进与选择：Elasticsearch 与 OpenSearch

【Elasticsearch】开源搜索技术的演进与选择：Elasticsearch 与 OpenSearch

开源搜索技术的演进与选择&#xff1a;Elasticsearch 与 OpenSearch 1.历史发展2.OpenSearch 与 Elasticsearch 相同点3.OpenSearch 与 Elasticsearch 不同点3.1 版本大不同3.2 许可证不同3.3 社区不同3.4 功能不同3.5 安全性不同3.6 性能不同3.7 价格不同3.8 两者可相互导入 4…
阅读更多...
LLM- 注意力机制

LLM- 注意力机制

一&#xff1a;什么是注意力机制&#xff0c;以及产生背景&#xff1f; &#xff08;1&#xff09;&#xff1a;RNN模型[RNN模型]的缺点&#xff1a;下图是例如RNN模型解决机器翻译的例子&#xff0c;从这个例子可以看到Encoder最后一个向量&#xff08;eos&#xff09;送给了…
阅读更多...
Open3D 从体素网格构建八叉树

Open3D 从体素网格构建八叉树

目录 一、概述 1.1体素网格 1.2八叉树构建 1.3应用 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2体素网格 3.3八叉树 3.4体素网格 一、概述 八叉树&#xff08;Octree&#xff09;是一种树状数据结构&#xff0c;用于递归地将三维空间划分为…
阅读更多...
极客天成RDMA分布式存储加速自动驾驶仿真建模

极客天成RDMA分布式存储加速自动驾驶仿真建模

01 自动驾驶汽车行业发展现状 随着全球5G技术的应用与发展&#xff0c;人工智能产业的逐步推进&#xff0c;无人驾驶汽车行业市场规模显著增长。中商产业研究院发布的《2024-2029全球与中国无人驾驶列车系统市场现状及未来发展趋势》显示&#xff0c;2023年全球无人驾驶汽车行…
阅读更多...
AutoMQ 生态集成 Kafdrop-ui

AutoMQ 生态集成 Kafdrop-ui

Kafdrop [1] 是一个为 Kafka 设计的简洁、直观且功能强大的Web UI 工具。它允许开发者和管理员轻松地查看和管理 Kafka 集群的关键元数据&#xff0c;包括主题、分区、消费者组以及他们的偏移量等。通过提供一个用户友好的界面&#xff0c;Kafdrop 大大简化了 Kafka 集群的监控…
阅读更多...
【Ubuntu】windows和Linux文件互传、共享

【Ubuntu】windows和Linux文件互传、共享

【Ubuntu】windows和Linux文件互传、共享 一、FTP、SAMBA、NFS简介 FTP: File Transfer Protocol&#xff08;文件传输协议) SAMBA: 基于SMB(Server Message Block服务器消息块)协议的软件实现 NFS: Network File System&#xff08;网络文件系统&#xff09; 二、Linux 共享文…
阅读更多...
QT案例-通过QCustomPlot库绘制Window系统CPU温度实时折线图

QT案例-通过QCustomPlot库绘制Window系统CPU温度实时折线图

之前项目中涉及到了获取硬件信息内容&#xff0c;对CPU的温度监控有点兴趣&#xff0c;观察和百度发现鲁大师和驱动人生的CPU温度监控貌似是用驱动实现的&#xff0c;有点太高大上了&#xff0c;搞不懂。后面经过到处查找资料终于找到了Qt在Windows 环境下监控CPU等硬件温度/运…
阅读更多...
android文本长按复制

android文本长按复制

android文本长按复制 &#x1f4d6;1. 长按直接复制✅步骤一&#xff1a;定义一个TextView✅步骤二&#xff1a;为TextView注册长按事件✅步骤三&#xff1a;弹出系统复制功能 &#x1f4d6;2. 长按弹框确认复制✅步骤一&#xff1a;定义一个TextView✅步骤二&#xff1a;封装P…
阅读更多...
vue详解

vue详解

目录 ​编辑 常用指令 v-for v-bind v-if & v-show v-if v-show v-on v-model Vue生命周期 ​编辑 Axios Axios使用步骤 Axios-请求方式别名 Vue简单案例 常用指令 指令:HTML标签上带有 v-前缀的特殊属性&#xff0c;不同的指令具有不同的含义&#xff0c;可…
阅读更多...
2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片(Form_Vision部分代码)

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片(Form_Vision部分代码)

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片(Form_Vision部分代码) 1 目标效果视频 CamManager 2 增加一个class IMG_BUFFER 用来管理采集的图片 // <summary> /// IMG_BUFFER 用来管理内存图片的抓取队列 /// </summary> public class IMG_BUFF…
阅读更多...
imx6ull/linux应用编程学习（14） MQTT基础知识

imx6ull/linux应用编程学习（14） MQTT基础知识

什么是mqtt&#xff1f; 与HTTP 协议一样&#xff0c; MQTT 协议也是应用层协议&#xff0c;工作在 TCP/IP 四层模型中的最上层&#xff08;应用层&#xff09;&#xff0c;构建于 TCP/IP协议上。 MQTT 最大优点在于&#xff0c;可以以极少的代码和有限的带宽&#xff0c;为连接…
阅读更多...
electron在VSCode和IDEA及webStrom等编辑器控制台打印日志乱码

electron在VSCode和IDEA及webStrom等编辑器控制台打印日志乱码

window10环境下设置 1.打开Windows设置 2.打开时间和语言&#xff0c;选择语言菜单、如何点击管理语言设置 3.打开之后选择管理&#xff0c;选择更改系统区域设置&#xff0c;把Beta版&#xff1a;使用Unicode UTF-8提供全球语言支持 勾上&#xff0c;点击确定&#xff0c;…
阅读更多...
后端学习（一）

后端学习（一）

添加数据库包&#xff1a; 数据库连接时 发生错误&#xff1a; 解决方式&#xff1a; SqlConnection conn new SqlConnection("serverlocalhost;databaseMyBBSDb;uidsa;pwd123456;Encryptfalse;") ;conn.Open();SqlCommand cmd new SqlCommand("SELECT * FROM…
阅读更多...
Debug-017-elementUI-el-cascader组件首次选择选项不触发表单的自定义校验

Debug-017-elementUI-el-cascader组件首次选择选项不触发表单的自定义校验

前情提要&#xff1a; 今天维护一个表单校验的时候发现一件事情&#xff0c;就是在表单中使用了 el-cascader组件&#xff0c;希望根据接口返回数据去动态校验一下这里面的选项&#xff0c;符合逻辑就通过自定义的表单校验&#xff0c;不符合就在这一项的下面标红提示。做的时候…
阅读更多...
OpenHarmony 入门——单元测试UnitTest快速入门

OpenHarmony 入门——单元测试UnitTest快速入门

引言 OpenHarmony 的单元测试&#xff08;UnitTest&#xff09;是一个关键的软件开发过程&#xff0c;它确保代码的各个部分能够按预期工作&#xff0c;OpenHarmony的测试框架中提供了很多种的单元测试&#xff0c;今天简单介绍下UnitTest 类型的TDD测试。 OpenHarmony 的TDD …
阅读更多...
最新文章

Copyright @ 2022~2023