Vue 3 路由机制详解与实践

news2024/11/16 11:34:15

一、路由的理解

路由是指导用户界面导航的一种机制。它通过映射 URL 到应用程序的不同视图组件来实现页面间的切换和导航。

二、路由基本切换效果

路由基本切换效果指的是当用户在应用程序中进行页面导航时，通过路由可以实现页面的切换，从而展示不同的视图组件。

VUE文件

<template>
  <h1 class="title">Vue路由测试</h1>
  <div class="actives">
    <RouterLink to="/home" active-class="activeclass" class="active"  tag="button">首页</RouterLink>
    <RouterLink to="/home" tag="button" class="button-link">码农</RouterLink>
    <RouterLink :to="{ path: '/news' }" active-class="activeclass" class="active">新闻</RouterLink>
    <RouterLink :to="{ name: '关于' }" active-class="activeclass" class="active">关于</RouterLink>
  </div>
  <div class="routerbox">
    <RouterView></RouterView>
  </div>
</template>

<script lang="ts" setup name="Person">
import { RouterLink, RouterView } from 'vue-router'
import { ref, reactive, watch, onMounted } from 'vue';
</script>
</script>
<style lang='scss' scoped>
h1 {
  text-align: center;
}

.actives {
  display: flex;
  justify-content: space-evenly;
  .button-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
  }
  .active {
    background-color: #808080;
    color: #fff;
    text-decoration: none;
    width: 100px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }

  .active:hover {
    background-color: #354139;
    color: #ECC980;
  }

  .activeclass {
    background-color: #354139;
    color: #ECC980;
    text-decoration: none;
    width: 100px;
    height: 50px;
    border-radius: 10%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }
}

.routerbox {
  margin: 0 auto;
  margin-top: 20px;
  width: 80%;
  height: 200px;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 20px;
}
</style>

manin.ts文件

// 创建一个路由器，并暴露出去
//第一步:引入createRouter
import { createRouter, createWebHistory } from 'vue-router'

//引入一个一个要呈现组件
import Home from '@/views/Home.vue'
import News from '@/views/News.vue'
import About from '@/views/About.vue'

// 第二步:创建路由器
const router = createRouter({
  history: createWebHistory(),//路由器的工作模式
  routes: [//一个一个的路由规则
    {// 将默认路由重定向到 '/home'
      path: '/',
      name: '首页',
      redirect: '/home'
    },
    {
      path: '/home',
      name: '首页',
      component: Home
    },
    {
      path: '/news',
      name: '新闻',
      component: News
    },
    {
      path: '/about',
      name: '关于',
      component: About
    }
  ]
})

export default router

main.ts

//引入createApp用于创建应用
import { createApp } from 'vue'
//引入App根组件
import App from './App.vue'
// 引入路由器
import router from './route/route'

//创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount('#app')

在这里插入图片描述

三、路由的两个注意点

1.路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
2.通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

四、路由器工作模式

1.history模式

优点:

  • URL 更加美观,不带有 #,更接近传统网站 URL
  • 利于 SEO 优化

缺点:

  • 后期项目上线,需要服务端配合处理路径问题,否则刷新会有 404 错误
const router = createRouter({
	history:createWebHistory(), //history模式

})

网址显示：http://localhost:5173/home

  1. hash模式

优点:

  • 无需服务端配合,即可运行
  • 兼容性更好

缺点:

  • URL 带有 #,不太美观
  • 对 SEO 优化相对较差
const router = createRouter({
	history:createWebHashHistory(), //hash模式

})

网址显示：http://localhost:5173/#/home

⭐不同点在于有无/#

五、路由 to 的两种写法

在 Vue 3 + TypeScript 中，可以使用对象字面量或者字符串形式来指定 to 属性。

对象字面量：to="{ name: 'Home' }"
字符串形式：to="/home"

六、路由命名路由

命名路由是指为特定路由指定一个名称，以便在代码中引用。这样做有助于在应用程序中进行路由导航时更清晰地指定目标路由。

// 创建路由器
const router = createRouter({
  history: createWebHistory(),//路由器的工作模式
  routes: [//一个一个的路由规则
    {// 将默认路由重定向到 '/home'
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: '首页',
      component: Home
    },
    {
      path: '/news',
      name: '新闻',
      component: News
    },
    {
      path: '/about',
      name: '关于',
      component: About
    }
  ]
})
export default router

七、路由嵌套路由

路由嵌套是指在一个路由下定义子路由，通过这种方式可以构建复杂的页面结构和导航层次。

  1. 编写News的子路由：Detail.vue
  2. 配置路由规则，使用children配置项：
const router = createRouter({
  history: createWebHistory(),//路由器的工作模式
  routes: [//一个一个的路由规则
    {
      path: '/news',
      name: '新闻',
      component: '@/views/News.vue',
      children: [
        {
          path: '/detal',
          component: '@/views/detal.vue'
        }
      ]
    }
  ]
})
export default router
  1. 跳转
<li v-for="item in newsList" :key="item.id">
	<RouterLink to="/news/detal" :active-data="item">{{ item.title }}</RouterLink>
</li>
  1. 记得去news组件中预留一个<router-view>
<template>
  <div class="flex">
    <div class="news">
      <ul>
        <li v-for="item in newsList" :key="item.id">
          <RouterLink to="/news/detal">{{ item.title }}</RouterLink>
        </li>
      </ul>
    </div>
    <div class="router-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script setup lang="ts" name="News">
import { ref, reactive, watch, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router';
const newsList = ref([
  { id: 1, title: '标题1', content: '内容1' },
  { id: 2, title: '标题2', content: '内容2' },
  { id: 3, title: '标题3', content: '内容3' },
  { id: 4, title: '标题4', content: '内容4' },
  { id: 5, title: '标题5', content: '内容5' },
])
</script>
<style lang='scss' scoped>
.flex {
  display: flex;
  justify-content: flex-start;

  .news {
    ul {
      margin: 0;
      padding: 0 10px 0 0;

      li {
        list-style-type: none;

        a {
          text-decoration: none;
        }
      }
    }
  }

  .router-content {
    width: 80%;
    border-radius: 10px;
    padding: 5px;
    border: #000 solid 1px;
  }
}
</style>

八、路由传参

  1. 路由 query 参数
    Query 参数是指在 URL 中以 ? 开头的参数，用于传递额外的信息给路由目标组件。在 Vue 3 + TypeScript 中，可以通过 $route.query 来获取这些参数。

1.query参数

（1）传递参数

<!-- 方式一：跳转并携带query参数（to的字符串写法） -->
<RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}
</RouterLink>
				
<!-- 方式二：跳转并携带query参数（to的对象写法） -->
<RouterLink :to="{
 path: '/news/detail',
 query: {
  id: item.id,
  title: item.title,
  content: item.content
 }
}">{{ item.title }}</RouterLink>

（2）接收参数：

import { ref, watchEffect, toRefs } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let { query } = toRefs(route)

（3）路由配置


const router = createRouter({
 history: createWebHistory(),//路由器的工作模式
 routes: [
  {
   path: '/news',
   name: '新闻',
   component: News,
   children: [
    {
	 name:'detail',
	 path: '/news/detail',
	 component: Detal
	}
  ]
 }
])

export default router

2.params参数

Params 参数是指在 URL 中使用动态路由参数的一种方式，通过这种方式可以在路由之间传递数据。在 Vue 3 + TypeScript 中，可以通过 $route.params 来获取这些参数。

（1）传递参数

<!-- 第一种方法 -->
<RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink>

<!-- 第二种方法 -->
<RouterLink 
 :to="{
  name: 'detail',
  params: {
   id: item.id,
   title: item.title,
   content: item.content,
  }
}">{{ item.title }}</RouterLink>

（2）接收参数

import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let { params } = toRefs(route)
console.log(params.value);

（3）路由配置

const router = createRouter({
 history: createWebHistory(),//路由器的工作模式
 routes: [
  {
   path: '/news',
   name: '新闻',
   component: News,
   children: [
    {
	 name:'detail',
	 path: '/news/detail/:id/:title/:content?',//id和title参数是必须的，但content参数可以省略
	 component: Detal
	}
  ]
 }
])

export default router

注意：

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
备注2：传递params参数时，需要提前在规则中占位。

九、路由 props 配置

让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

（1）传递参数

const router = createRouter({
 history: createWebHistory(),//路由器的工作模式
 routes: [//一个一个的路由规则
  {
   path: '/news',
   name: '新闻',
   component: News,
   children: [
    {
     name:'xiang',
     path:'detail/:id/:title/:content',
     component:Detail,​  
     // ⭐⭐第一种写法:将路由收到的所有params参数作为props传给路由组件
     props: true,
     
     // ⭐⭐第二种写法:函数写法，可以自己决定将什么作为props给路由组件
     props(route) {
      return route.query
     }

     // 第三种写法（几乎用不到）:对象写法，可以自己决定将什么作为props给路由组件
     props :{
     id:1,
     title:'标题',
     content:'内容'
    }
   ]
  }
 ]
})
export default router

等同于 <Detail :id="1" :title="标题" :content="内容" /> 这样的 prop传值

（2）接收参数

<template>
 <div>
  编号：{{ id }}
  标题：{{ title }}
  内容：{{ content }}
 </div>
</template>

<script lang="ts" setup name="Person">
 defineProps(['id','title','content',])
</script>

十、路由 replace 属性

replace 属性是指在导航时替换当前路由历史记录而不是添加新记录。在某些情况下，使用 replace 可以更好地管理路由历史。

  1. 作用：控制路由跳转时操作浏览器历史记录的模式。
  2. 浏览器的历史记录有两种写入方式：分别为push和replace：
  • push是追加历史记录（默认值）。
  • replace是替换当前记录。
  1. 开启replace模式路由跳转时加了replace的路由，导航就不会留下历史记录
<RouterLink replace .......>News</RouterLink>

十一、路由编程式路由导航

编程式路由导航是指通过 JavaScript 代码来进行页面导航，可以在组件方法中使用 $router 对象来实现。

<template>
  <div>
    <button @click="navGetTo()">点我跳转新闻页</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { useRouter } from 'vue-router';
const router = useRouter()

function navGetTo() {
 router.push('/news')
}
</script>

应用场景：

符合条件跳转，登陆成功跳转个人主页、整点秒杀跳转鼠标滑过跳转等等

十二、路由重定向

路由重定向是指当用户访问某个特定路径时自动将其重定向到另一个路径，通常用于处理用户访问的旧路径或者错误路径。

 {
 // 将默认路由重定向到 '/home'
  path: '/',
  redirect: '/home'
 }

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

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

相关文章

ICMP详解

ICMP详解

3 ICMP ICMP&#xff08;Internet Control Message Protocol&#xff0c;因特网控制报文协议&#xff09;是一个差错报告机制&#xff0c;是TCP/IP协议簇中的一个重要子协议&#xff0c;通常被IP层或更高层协议&#xff08;TCP或UDP&#xff09;使用&#xff0c;属于网络层协议…
阅读更多...
CTF(web方向)--md5的“===”和“==”的绕过

CTF(web方向)--md5的“===”和“==”的绕过

一、PHP弱类型说明 1.简介 php是一种弱类型语言&#xff0c;对数据的类型要求并不严格&#xff0c;可以让数据类型互相转换。 在php中有两种比较符号: 一种是 &#xff0c;另外一种是 &#xff0c;都是用来比较两个数值是否相等的操作符&#xff0c;但他们也是有区别的: &a…
阅读更多...
Linux 小技巧1

Linux 小技巧1

目录 一. 统计文件的总行数二. 获取从第二行开始的内容三. 合并两个文件为一个文件四. 统计指定列唯一值的数量五. 列出文件的绝对路径六. 获取除了空白行和注释之外的部分 一. 统计文件的总行数 ⏹非压缩文件 统计当前文件夹下csv文件的行数 wc -l ./*.csv统计指定文件夹下…
阅读更多...
想要应聘前端工程师——学习路线指南

想要应聘前端工程师——学习路线指南

前端工程师学习路线 按照前端岗位需求，以优先学习工作更需要，面试更常考的内容为原则，由浅入深，层层铺垫，与时俱进，可以较容易地总结出前端学习路线图： HTML / CSS / JavaScript 基础学习 《Web 入门》 MDN 权威入门指南，HTML / CSS / JavaScript 快速上手 《CSS 世界…
阅读更多...
面试中算法(链表）

面试中算法(链表）

链表相关的题 有一个单向链表&#xff0c;链表中有可能出现“环”&#xff0c;如图所示&#xff0c;如何用程序来判断该链表是否为有环链表呢? 对于这道题&#xff0c;有一个很巧妙的方法&#xff0c;这个方法利用了两个指针。 首先创建两个指针pi和p2(在Python里就是两个对象…
阅读更多...
【问题分析】TaskDisplayArea被隐藏导致的黑屏以及无焦点窗口问题【Android 14】

【问题分析】TaskDisplayArea被隐藏导致的黑屏以及无焦点窗口问题【Android 14】

1 问题描述 用户操作出的偶现的黑屏以及无焦点窗口问题。 直接原因是&#xff0c;TaskDisplayArea被添加了eLayerHidden标志位&#xff0c;导致所有App的窗口不可见&#xff0c;从而出现黑屏和无焦点窗口问题&#xff0c;相关log为&#xff1a; 这个log是MTK添加的&#xff0…
阅读更多...
目标检测——YOLOv8算法解读

目标检测——YOLOv8算法解读

作者&#xff1a;Ultralytics公司 代码&#xff1a;https://github.com/ultralytics/ultralytics YOLO系列算法解读&#xff1a; YOLOv1通俗易懂版解读、SSD算法解读、YOLOv2算法解读、YOLOv3算法解读、YOLOv4算法解读、YOLOv5算法解读、YOLOR算法解读、YOLOX算法解读、YOLOv6算…
阅读更多...
7. Django 模型与数据库

7. Django 模型与数据库

第7章 模型与数据库 Django对各种数据库提供了很好的支持, 包括PostgreSQL, MySQL, SQLite和Oracle, 而且为这些数据库提供了统一的API方法, 这些API统称为ORM框架. 通过使用Django内置的ORM框架可以实现数据库连接和读写操作. 本章以SQLite数据库为例, 分别讲述Django的模型…
阅读更多...
统一威胁情报如何赋能SOC应对复杂威胁？

统一威胁情报如何赋能SOC应对复杂威胁？

安全运营中心&#xff08;SOC&#xff09;是组织网络安全战略的核心组成部分&#xff0c;扮演着至关重要的角色。其负责实时监控整个IT基础设施&#xff0c;以检测、响应和预防各类网络安全威胁。网络安全威胁日益复杂且多变的数字化时代&#xff0c;攻击平面泛化、基础设施复杂…
阅读更多...
10天精通Python爬虫：详细路线速成，开启兼职副业新篇章！

10天精通Python爬虫：详细路线速成，开启兼职副业新篇章！

爬虫&#xff0c;即网络爬虫&#xff0c;是一种自动化程序&#xff0c;用于从互联网上抓取数据。在现代信息社会&#xff0c;爬虫技术广泛应用于数据分析、搜索引擎优化、竞品分析等领域。学习爬虫不仅可以提高数据处理能力&#xff0c;还可以为未来的职业发展打下坚实基础。 …
阅读更多...
java基础之java容器-Collection，Map

java基础之java容器-Collection，Map

java容器 java容器分类一. Collection1. List①. ArrayList② . LinkedList③ . Vector 2. Queue队列①. LinkedList②. PriorityQueue 3. Set集合①. HashSet②. TreeSet 二. Map1. HashMap2.TreeMap3. Hashtable java容器分类 java容器分为两大类&#xff0c;分别是Collecti…
阅读更多...
修复所有 bug 并不能解决所有问题

修复所有 bug 并不能解决所有问题

原文&#xff1a;jeffpsherman - 2024.04.08 在软件领域&#xff0c;如同在制造业&#xff0c;有些问题是由于 bug 或“特殊原因”引发的&#xff0c;而有些则是“常见原因”&#xff0c;这是由于系统设计和实现的性质所导致的。修复 bug 就是移除特殊原因&#xff0c;消除 bu…
阅读更多...
项目经理学习PMP对自己工作有多大帮助？

项目经理学习PMP对自己工作有多大帮助？

PMP是一种项目管理认证&#xff0c;也是最流行和含金量较高的认证之一。因此&#xff0c;你问它对项目管理有多大帮助&#xff0c;我可以说PMP可以被视为量身定制给项目管理岗人员的一个证书&#xff0c;你能理解它的重要性吗&#xff1f; 随着国家经济建设由基础设施向高端产业…
阅读更多...
新闻 | 电子系协同智能中心与昌平区未来高教园及多所高校开展交流，共话智能无人平台建设

新闻 | 电子系协同智能中心与昌平区未来高教园及多所高校开展交流，共话智能无人平台建设

2024年4月8日&#xff0c;清华大学电子工程系在北京昌平两岸共盈科技产业园电子系地空协同智能无人平台基地成功举办“美团杯”智能无人机挑战赛&#xff0c;清华大学电子系党委书记沈渊、昌平区未来城管委会校城融合处处长熊玉川、清华大学团委副书记黄峰等出席。此外来自昌平…
阅读更多...
CSS详解（一）

CSS详解（一）

1、css工作中使用场景 美化网页&#xff08;文字样式、背景样式、边框样式、盒子模型、定位、动画、&#xff09;&#xff0c;布局页面&#xff08;flex布局、响应式布局、媒体查询&#xff09; 2、CSS 规则 通常由两个主要部分组成选择器和样式声明 2.1选择器 选择器指定了…
阅读更多...
Unity打包PC端exe，压缩打包为一个exe文件

Unity打包PC端exe，压缩打包为一个exe文件

目录 一.打包成功 1.打包输出文件 二.压缩输出目录为exe单个文件 1.添加到压缩文件 2.其他设置 1.点击“高级→自压缩选项” 2.修改解压后运行程序 3.设置模式 4.更新 三、生成.exe 一.打包成功 1.打包输出文件 1、一个后缀为 BurstDebugInformation_DoNotShip的文…
阅读更多...
unittest断言_assert_使用python自带的断言

unittest断言_assert_使用python自带的断言

既可以使用&#xff1a; 1. self.assertEqual(ex1, ex2) #判断ex1 是否相等ex2 2. self.assertIn(ex1 ,ex2) # ex2是否包含ex1 注意&#xff1a;所谓的包含不能跳字符 3. self.assertTrue(ex) # 判断ex是否为True又可以使用&#xff1a; """目标断言扩展&…
阅读更多...
C#实现 IDbConnection / IDbCommand 等相关通用数据接口

C#实现 IDbConnection / IDbCommand 等相关通用数据接口

目录 关于数据接口 对象执行流程 范例运行环境 设计与实现 引用 GetConnection方法 GetCommand方法 GetParameter方法 小结 关于数据接口 在.net 应用中&#xff0c;与数据库进行连接、访问和执行经常会用到数据接口的相关对象&#xff0c;如下&#xff1a; 1、 Con…
阅读更多...
【mysql】mysql命令使用大全，你想要的都在这里

【mysql】mysql命令使用大全，你想要的都在这里

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
《前端面试题》- React - 如何区分函数组件和类组件

《前端面试题》- React - 如何区分函数组件和类组件

问题 如何区分函数组件和类组件&#xff1f; 答案 可以使用instanceof 或者Component.prototype.isReactComponent。 示例 函数组件 export default function FunctionComonent() {if(FunctionComonent.prototype.isReactComponent){console.log(FunctionComonent是类组件…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023