[GN] Vue3.2 快速上手 ---- 核心语法(终章)_3

文章目录

    • 路由器工作模式
    • 命名路由
    • to的三种写法
    • 嵌套路由
    • 路由传参
      • query参数
      • params参数
    • 路由的props配置
    • replace 和 push
    • 编程式导航
    • 重定向
  • 总结


路由器工作模式

  1. history模式

    优点:URL更加美观,不带有#,更接近传统的网站URL

    缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有404错误。

    const router = createRouter({history:createWebHistory(), //history模式/******/
    })
    
  2. hash模式

    优点:兼容性更好,因为不需要服务器端处理路径。

    缺点:URL带有#不太美观,且在SEO优化方面相对较差。

    const router = createRouter({history:createWebHashHistory(), //hash模式/******/
    })
    

命名路由

routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,},{name:'guanyu',path:'/about',component:About}
]

to的三种写法

<!-- 第一种:to的字符串写法 -->
<router-link active-class="active" to="/home">Home</router-link><!-- 第二种:to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link><!-- 第三种: -->
<router-link active-class="active" :to="{name:'zhuye'}">Home</router-link>

嵌套路由

  1. 编写News的子路由:Detail.vue

  2. 配置路由规则,使用children配置项:

    const router = createRouter({history:createWebHistory(),routes:[{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail}]}]
    })
    export default router
    
  3. 跳转路由(记得要加完整路径):

    <router-link to="/news/detail">xxxx</router-link>
    <!---->
    <router-link :to="{path:'/news/detail'}">xxxx</router-link>
    

路由传参

query参数

  1. 传递参数

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

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

params参数

  1. 传递参数

    <!-- 跳转并携带params参数(to的字符串写法) -->
    <RouterLink :to="`/news/detail/001/新闻001/内容001`"></RouterLink> //直接写要传送内容 需要提前在规则(router)中配置站位<!-- 跳转并携带params参数(to的对象写法) -->
    <RouterLink :to="{name:'xiang', //用name跳转params:{id:news.id,title:news.title,content:news.title}}"
    ></RouterLink>
    
  2. 接收参数:

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

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

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

路由的props配置

作用:让路由组件更方便的收到参数(可以将路由参数作为props传给组件)

{name:'xiang',path:'detail/:id/:title/:content',component:Detail,// props的对象写法,作用:把对象中的每一组key-value作为props传给Detail组件// props:{a:1,b:2,c:3}, // props的布尔值写法,作用:把收到了每一组params参数,作为props传给Detail组件// props:true// props的函数写法,作用:把返回的对象中每一组key-value作为props传给Detail组件props(route){return route.query}
}

replace 和 push

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

  2. 浏览器的历史记录有两种写入方式:分别为pushreplace

    • push是追加历史记录(默认值)。
    • replace是替换当前记录。
  3. 开启replace模式:

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

编程式导航

路由组件的两个重要的属性:$route$router变成了两个hooks

import {useRoute,useRouter} from 'vue-router'const route = useRoute()
const router = useRouter()console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)

重定向

  1. 作用:将特定的路径,重新定向到已有路由。

  2. 具体编码:

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

总结

Vue 3.0的基本语法至此已经结束了,后面将会介绍pinia 和 组件通信。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UIElement编辑器扩展 组件 Inspector

UIElement编辑器扩展 组件 Inspector https://docs.unity.cn/cn/2021.3/Manual/UIE-create-a-binding-uxml-inspector.html 简单开始 声明序列化VisualTreeAsset [SerializeField] VisualTreeAsset visualTree; 声明完&#xff0c;直接在脚本的Inspector面板&#xff0c;把你…

水塘抽样算法

水塘抽样算法 1、问题描述 最近经常能看到面经中出现在大数据流中的随机抽样问题 即&#xff1a;当内存无法加载全部数据时&#xff0c;如何从包含未知大小的数据流中随机选取k个数据&#xff0c;并且要保证每个数据被抽取到的概率相等。 假设数据流含有N个数&#xff0c;我…

JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑

在JavaScript中&#xff0c;运算符用于执行各种计算和操作。 算术运算符&#xff1a; &#xff1a;用于加法运算。 javascriptlet a 5; let b 3; let sum a b; // 结果: 8 -&#xff1a;用于减法运算。 javascriptlet difference a - b; // 结果: 2 *&#xff1a;用于乘法…

树莓派挂载fat32 u盘

通过fdisk -l 查到设备是sda1 sudo nano /etc/fstab 文件末尾添加&#xff1a; /dev/sda1 /home/pi/mydic_mount auto defaults,noexec,umask0000 0 0 参考文章树莓派linux系统 挂载硬盘&#xff08;U盘&#xff09;相关知识总结&#xff08;五星推荐&#xff09;_树莓派挂…

Rancher部署k8s集群测试安装nginx(节点重新初始化方法,亲测)

目录 一、安装前准备工作计算机升级linux内核时间同步Hostname设置hosts设置关闭防火墙&#xff0c;selinux关闭swap安装docker 二、安装rancher部署rancher 三、安装k8s安装k8s集群易错点&#xff0c;重新初始化 四、安装kutectl五、测试安装nginx工作负载 一、安装前准备工作…

SD-WAN企业组网场景深度解析

在当前快速发展的企业网络环境中&#xff0c;SD-WAN技术不仅仅是实现企业站点之间网络互通的关键&#xff0c;更是满足不同站点对因特网、SaaS云应用、公有云等多种企业应用和业务访问的理想选择。从企业的WAN业务需求出发&#xff0c;我们可以对SD-WAN的组网场景进行深度解析&…

参数校验: spring-boot-starter-validation

参数校验: spring-boot-starter-validation pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency>应用 PostMapping("/login")public Re…

VIM工程的编译 / VI的快捷键记录

文章目录 VIM工程的编译 / VI的快捷键记录概述笔记工程的编译工程的编译 - 命令行vim工程的编译 - GUI版vim备注VIM的帮助文件位置VIM官方教程vim 常用快捷键启动vi时, 指定要编辑哪个文件正常模式光标的移动退出不保存 退出保存只保存不退出另存到指定文件移动到行首移动到行尾…

替代堆叠的新技术M-lag

M-lag&#xff1a;跨设备链路聚合组&#xff0c;是一种实现跨设备链路聚合的机制。将一台设备与另外两台设备进行跨设备链路聚合&#xff0c;从而把链路的可靠性从单板级提升到设备级&#xff0c;组成双活系统。 基本概念&#xff1a; peer-link链路&#xff1a;是一条聚合链…

[C#]winform部署官方yolov8-rtdetr目标检测的onnx模型

【官方框架地址】 https://github.com/ultralytics/ultralytics 【算法介绍】 RTDETR&#xff0c;全称“Real-Time Detection with Transformer for Object Tracking and Detection”&#xff0c;是一种基于Transformer结构的实时目标检测和跟踪算法。它在目标检测和跟踪领域…

Android学习(五):常用控件

Android学习&#xff08;五&#xff09;&#xff1a;常用控件 常用控件 TextViewEditTextButtonRadioButtonImageView 1、TextView控件 1.1、简介 TextView是用于显示文字(字符串)的控件&#xff0c;可在代码中通过设置属性改变文字的大小、颜色、样式等功能。 1.2、示例…

力扣刷MySQL-第五弹(详细讲解)

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;力扣刷题讲解-MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出…

编程笔记 html5cssjs 048 CSS链接

编程笔记 html5&css&js 048 CSS链接 一、设置链接样式二、文本装饰三、背景色四、链接按钮五、练习小结 通过 CSS&#xff0c;可以用不同的方式设置链接的样式。 一、设置链接样式 链接可以使用任何 CSS 属性&#xff08;例如 color、font-family、background 等&…

数据库系统概论-00引言

引言 -数据库系统的发展经历了三代演变 层次/网状数据库系统&#xff0c;关系数据库系统&#xff0c;新一代数据库系统。 -造就了四位图灵奖得主 C.W.Bachman,E.F.Codd,James Gray,M.R.Stoebraker.。 -发展了一门计算机基础学科 数据建模和DBMS核心技术为主&#xff…

Java 面向对象02 封装 (黑马)

人画圆&#xff1a;画圆这个方法应该定义在园这个类里面。 人关门&#xff1a;是人给了门一个作用力&#xff0c;然后门自己关上了门&#xff0c;所以关门的方法是在门的类里面 封装对象的好处&#xff1a; 调用Java自带的方法举例实现&#xff1a; 在测试类中&#xff0c;对其…

电脑pdf如何转换成word格式?用它实现pdf文件一键转换

pdf转word格式可以用于提取和重用pdf文档中的内容&#xff0c;有时候&#xff0c;我们可能需要引用或引用pdf文档中的一些段落、表格或数据&#xff0c;通过将pdf转换为可编辑的Word文档&#xff0c;可以轻松地复制和粘贴所需内容&#xff0c;节省我们的时间&#xff0c;那么如…

Element-UI 多个el-upload组件自定义上传,不用上传url,并且携带自定义传参(文件序号)

1. 需求&#xff1a; 有多个&#xff08;不确定具体数量&#xff09;的upload组件&#xff0c;每个都需要单独上传获取文件&#xff08;JS File类型&#xff09;&#xff0c;不需要action上传到指定url&#xff0c;自定义上传动作和http操作。而且因为不确定组件数量&#xff0…

Oracle 经典练习题 50 题

文章目录 一 CreateTable二 练习题1 查询"01"课程比"02"课程成绩高的学生的信息及课程分数2 查询"01"课程比"02"课程成绩低的学生的信息及课程分数3 查询平均成绩大于等于60分的同学的学生编号和学生姓名和平均成绩4 查询平均成绩小于…

力扣精选算法100题——串联所有单词的字串(滑动窗口专题)

本题链接——串联所有单词的字串 本题和找到字符串中所有字母异位词题目非常相似&#xff0c;思路都是一样。通过自己的大脑能发现其中的相似之处。 第一步&#xff1a;了解题意 就按实例来分析吧&#xff0c;这样更通俗易懂。 words["ab","cd","ef…

Pycharm Terminal 无法激活conda环境

1.问题 Failed to activate conda environment. Please open Anaconda prompt, and run conda init powershell there. 这导致我们无法在Pycharm中使用conda命令 2.解决办法 修改为第二个&#xff0c;然后重启Terminal 再打开时发现已经是当前的conda环境