菜鸟学习vue3笔记-vue3 router回顾

1、路由router

pnpm i  vue-router

2、创建使用环境

1.src下创建 router文件夹、里面创建index.ts文件
//创建一个路由暴露出去//1.引入createRouter
import { createRouter, createWebHistory } from "vue-router";// import Home  from '../components/Home.vue'// import Goods from '../components/Goods.vue'
// import Mine from "../components/Mine.vue";//2.创建路由器
const router = createRouter({history: createWebHistory(),routes: [{path: "/home",component: ()=>import ("../components/Home.vue"),// component:Home},{path: "/goods",component: ()=>import('../components/Goods.vue'),// component:Goods},{path: "/mine",component: ()=>import('../components/Mine.vue'),// component:Mine},{path:'/',redirect:'/home',}],
});
export default router
2.main.ts文件中配置
//引入路由器import router from './router'const app=createApp(App)//使用路由器app.use(router)

3.页面中使用 RouterView, RouterLink

<template><div class="box"><div class="nav-box"><RouterLink to="/home">首页</RouterLink><RouterLink to="/goods">商品</RouterLink><RouterLink to="/mine">我的</RouterLink></div><div class="content-box"><RouterView></RouterView></div></div>
</template><script setup lang="ts">
import { RouterView, RouterLink } from "vue-router";
</script><style lang="scss" scoped>
.box {.nav-box {background-color: red;// border: 1px solid #00ff00;display: flex;> a {flex: 1;border: 1px solid #00ff00;text-align: center;}}
}
</style>

to 的两种写法

<RouterLink to="/home">首页</RouterLink><RouterLink to="/goods">商品</RouterLink><RouterLink to="/mine">我的</RouterLink>
<RouterLink:to="{path: '/mine',}">我的</RouterLink>

命名路由

{path: "/home",name:'homePage',component: ()=>import ("../pages/Home.vue"),// component:Home},{path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'/detial',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},{path: "/mine",name:'mine',component: ()=>import('../pages/Mine.vue'),// component:Mine},<RouterLink:to="{name: 'mine',}">我的</RouterLink>

嵌套路由

  {path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<template><div class="box"><div class="left"><ul><li v-for="(item, index) in goods" :key="index"><RouterLink to="/goods/detial"> {{ item }}</RouterLink></li></ul></div><div class="right"><RouterView></RouterView></div></div>
</template>
query 传参
  <!-- 第一种写法 --><RouterLink :to="`/goods/detial?index=${index}&title=${item}`">{{ item }}</RouterLink><!-- 第二种写法 --><RouterLink:to="{path: '/goods/detial',query: {index: index,title: item,},}">{{ item }}</RouterLink><!-- <template><div>商品详情{{ router.query.index }}---{{ router.query.title }}</div>
</template> -->
<template><div>商品详情{{ query.index }}---{{ query.title }}</div>
</template><script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";
let router = useRoute();// console.log(useRoute().query);let { query } = toRefs(router);// let { index, title } = toRefs(useRoute().query);
</script><style lang="scss" scoped></style>
params 传参
 {path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial/:index/:title',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<router-link :to="`/goods/detial/${index}/${item}`">{{ item }}</router-link><template><div>商品详情{{ params.index }}---{{ params.title }}</div>
</template><script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";
let router = useRoute();console.log(router);let { params } = toRefs(router);
//这种写法必须写name path报错
{path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial/:index/:title',name:'xiangqing',component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<!-- 第二种写法 --><router-link:to="{// path: '/goods/detial', //path 会报错name: 'xiangqing',params: {index: index,title: item,},}">{{ item }}</router-link>

路由组件props(params 传参)

{path: "/goods",name:'goodsPage',component: ()=>import('../pages/Goods.vue'),children:[{path:'detial/:index/:title?',name:'xiangqing',props:true, //开启 只处理params参数component:()=>import('../pages/GoodsDeatil.vue')}]// component:Goods},<template><div>商品详情{{ index }}---{{ title }}</div>
</template><script setup lang="ts">
import { toRefs } from "vue";defineProps(["index", "title"]);//接受属性
// import { useRoute } from "vue-router";
// let router = useRoute();// console.log(router);// let { params } = toRefs(router);// let { index, title } = toRefs(useRoute().query);
</script><style lang="scss" scoped></style>

query传参 这样设置

props(router){return router.query},

编程式导航

router-link 本质是a 标签<script setup lang="ts">
import { onMounted } from "vue";import { useRouter } from "vue-router";let router = useRouter();onMounted(() => {setTimeout(() => {router.push("/mine");}, 3000);
});<button @click="lookDetail(item, index)">点击查看</button>let lookDetail = (item, index) => {router.push({name: "xiangqing",params: {index: index,title: item,},});
};

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

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

相关文章

Global Mapper SDK 19 中文开发文档(十二)

7.3 结构的详细描述 7.3.1 GM_AreaElevStats_t &#xff08;1&#xff09;声明 public struct GM_AreaElevStats_t &#xff08;2&#xff09;字段 字段说明mAvgElev平均海拔&#xff08;以米为单位&#xff09;。mAvgSlope平均斜坡角度&#xff08;以度为单位&#xff09…

VMware 虚拟机 ubuntu 20.04 硬盘扩容方法

前言 最近由于需要编译 【RK3568】的 Linux SDK&#xff0c;发现 虚拟机默认的 200G 空间不足了&#xff0c;因此想增加这个 200G 空间的限制&#xff0c;通过网络上查找了一些方法&#xff0c;加上自己亲自验证&#xff0c;确认 硬盘扩容 正常&#xff0c;方法也比较的容易&a…

Vue:Vue与VueComponent的关系图

1.一个重要的内置关系&#xff1a;VueComponent.prototype.proto Vue.prototype 2.为什么要有这个关系&#xff1a;让组件实例对象&#xff08;vc&#xff09;可以访问到 Vue原型上的属性、方法。 案例证明&#xff1a; <!DOCTYPE html> <html lang"en"&…

Java日期和时间(二)

新增的日期和时间 为什么要学习新增的日期和时间 1、代替Calendar LocalDate&#xff1a;年、月、日 LocalTime&#xff1a;时、分、秒 LocalDateTime&#xff1a;年、月、日、时、分、秒 ZoneId&#xff1a;时区 ZoneldDatetime&#xff1a;带时区的时间 2、代替Date Instan…

解决npm,pnpm,yarn等安装electron超时等问题

我在安装electron的时候&#xff0c;出现了超时等等各种问题&#xff1a; &#xff08;RequestError: connect ETIMEDOUT 20.205.243.166:443&#xff09; npm yarn&#xff1a;Request Error: connect ETIMEDOUT 20.205.243.166:443 RequestError: socket hang up npm ER…

【排序】堆排序(C语言实现)

文章目录 前言1. 堆排序1.1 堆排序的思想1.2 堆排序的实现 2. 为什么向下调整而不是向上调整 前言 本章主要会讲堆排序的实现过程以及向上调整和向下调整的时间复杂度&#xff0c;在学习本章前&#xff0c;需要对堆、以及向上调整和向下调整有一个了解&#xff0c;如果不了解的…

vite+Vue3学习笔记(3)——界面设计

1 Element-plus 这是一个基于Vue3的组件库&#xff0c;能够快速构建界面样式。 官网链接&#xff1a; https://element-plus.gitee.io/zh-CN/guide/design.html 1.1 基础组件 1.1.1 安装 项目中的终端输入&#xff1a; npm install --save element-plus 1.1.2 引用 1.1.2.1…

VCG 角度弧度互转

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 VCG为我们提供了角度域弧度互相转换的函数vcg::math::ToRad与vcg::math::ToDeg,虽然两者的转换很简单,不过既然VCG已经我们提供了相关函数,这里还是用起来,下面是一个简单的演示代码。 二、实现代码 //VCG #in…

图论及其应用(匈牙利算法)---期末胡乱复习版

目录 题目知识点解题步骤小结题目 T1:从下图中给定的 M = {x1y4,x2y2,x3y1,x4y5},用 Hungariam算法【匈牙利算法】 求出图中的完美匹配,并写出步骤。 知识点 关于匈牙利算法: 需要注意的是,匈牙利算法仅适用于二分图,并且能够找到完美匹配。什么是交替路?从一个未匹…

vite 打包二级目录记录

1、react 配置 首先放一个简单粗暴的方法 使用 HashRouter&#xff0c; 缺点就是路由会带 # <HashRouter><App /> </HashRouter>使用 BrowserRouter 时需要进行下面配置 1、package 配置 {...other,"homepage": "/web" }2、vite.con…

BDD - Python Behave Retry 机制

BDD - Python Behave Retry 机制 引言Behave RetryBehave Retry 应用feature 文件创建 step 文件Retry运行 Behave 并生成 rerun 文件重新运行失败的场景 引言 在日常运行测试用例&#xff0c;有时因为环境不稳定造成一些测试用例跑失败了&#xff0c;如果能将这些失败的测试用…

计算字符串的长度几种方法 | 递归 | 指针减指针 | 计数器 | C语言 | 详解 | 期末考试必看!!!

一&#xff0c;使用 递归 计算 字符串 的 长度 1&#xff0c;题目描述 2&#xff0c;分析题目 Ⅰ&#xff0c;题目中要求除了函数的形参&#xff0c;函数中不能够使用多余的变量&#xff08;这是比较苛刻的要求&#xff09;。 Ⅱ&#xff0c;根据此&#xff0c;很自然的…

k3s-安装、卸载、证书过期x509

k3s-安装、卸载、证书过期 K3S 是轻量级的 Kubernetes。易于安装&#xff0c;仅需要 Kubernetes 内存的一半&#xff0c;所有组件都在一个小于 100 MB 的二进制文件中。 环境准备 # 配置yum源 yum install -y yum-utils yum-config-manager --add-repo http://mirrors.aliyu…

【PostgreSQL】表操作-修改表

【PostgreSQL】表操作快速链接 创建表及基础表命令 修改表 表权限 添加列 ALTER TABLE products ADD COLUMN description text;新列最初填充给定的任何默认值DEFAULT&#xff08;如果未指定子句&#xff0c;则为 null&#xff09;。 注意&#xff1a; 从 PostgreSQL 11 开始…

12.1 【Screen配置】概括

写在前面 在使用Screen服务前,我们需要对Screen进行配置或了解Screen配置信息,对我们的开发调试很重要。 一,配置文件介绍 graphics.conf 文件位于以下目录中: 源码目录:$QNX_TARGET/processor/usr/lib/graphics/platform 终端目录:/usr/lib/graphics/platform 其中处…

leetcode 76. 最小覆盖子串

题目链接&#xff1a;leetcode 76 1.题目 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 “” 。 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻找的子字符串中该字符数…

JavaScript 常用事件演示

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍在在JavaScript 常用事件演示以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可以在评论区…

回归预测 | MATLAB实OOA-LSTM基于鱼鹰优化算法优化长短期记忆网络的多输入单输出数据回归预测模型 (多指标,多图)

回归预测 | MATLAB实OOA-LSTM基于鱼鹰优化算法优化长短期记忆网络的多输入单输出数据回归预测模型 &#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实OOA-LSTM基于鱼鹰优化算法优化长短期记忆网络的多输入单输出数据回归预测模型 &#xff08;多指标&a…

20231228在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单前置摄像头ov13850

20231228在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单前置摄像头ov13850 2023/12/28 10:42 【碰到一个很神奇的问题】&#xff1a; 昨天晚上前置摄像头怎么也点不亮&#xff01;改了巨多的地方&#xff01;晚上睡觉之前把开发板彻底断电了&#xff01;今天开电脑…

CISSP 第2章: 人员安全和风险管理概念

第二章 人员安全和风险管理概念 2.1 促进人员安全策略 构建工作描述方面的重要因素包括: 职责分离: 把关键的、重要的和敏感工作任务分配给若干不同的管理员或高级执行者&#xff0c;防止共谋 工作职责:最小特权原则 岗位轮换:提供知识冗余&#xff0c;减少伪造、数据更改、偷…