///////////////////////////   vue 中使用路由技巧:router ////////////////////////////////

写笔记说明,之前在江门工作中整理过vue全套笔记,整理了好多经典案例,都是随意记录,由于工作中一段时间在研究java  来到广州后,发现笔记中有些案例居然自己都看不懂,对自己都开始晕了,所以需要认真重做一下笔记,希望自己尽量用心一些,最好是能帮助到别人,让别人也能看懂,那就在好不过了,再者白天工作中也需要整理公司技术文档,正好可以配合好好补一下前端知识,顺便重新整理自己的前端知识体系。

笔记开始日期2022-7-14

+++++++++++++++++++++++++    简介  ++++++++++++++++++++++++++++++++++++++++++++++++++++

通常前端所说的路由是指浏览器请求地址,比如http:127.0.0.1:80/index?id=1  

请求地址又名 url,  一般分为五部份,其中http 名称叫协议;  127.0.0.1  叫地求地址;  80表示端口,备注: 如果端口是80,浏览器可以省略;   index表示资源名;   id表示参数。

+++++++++++++++++++++++ +++++++++++++   使用场景      ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

vue3 路由传递参数,在开发的时候有时候需要向另一个页面传入参数,通常有二个方法,简单冒号传参和query对象传参

在实际使用场景中,如果参数少,可以用冒号传参方法,比如只是传入id ,如果参数较多最好用对象方式带参数,用query方式。

////////////////////////冒号传参方式  示例:////////////////////////////

1,先在路由文件中定义传参:

 {
path: '/user:id',
name: 'user',
component: userindex
}
]

2,   在跳转中带入参数:<router-link :to="'/user' + userid">用户</router-link>

<template>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link :to="'/user' + userid">用户</router-link>
<router-view/>
</template>
<script>
export default {
name: 'app',
data () {
return {
userid: 'xsy'
}
}
}
</script>

 第三步,在目标路由文件中接收并处理参数; 

<template>
<div>
<h1>我是用户页</h1>
<h2>{{$route.params.id}}</h2>
</div>
</template>

  //////////////////////////////////////   query 传参方式  ////////////////////////////////////////////////////////

简介使用方法:

配置路由的时候没有区别,不需要定义,在传参时候加上query作key传递方式,

query方式示例:<routr-link :to ="{path: './profile', query: {name: 'xsy',age:20}}">

最终形成的路由会以?号拼接: http://localhost:8080/#/pro?name=xsy&age=20

总结二种方式传参的形式:

<router-link :to="'/user' + userid">用户</router-link>
<router-link :to="{path: '/pro',query:{name: 'xsy',age: 20}}">prow</router-link>

//////////////////////////////////////////////////////////////   实例  /////////////////////////////////////////////////////////////////////////////////////////////////

功能需求:编写一个点击二个按扭,跳转到另一个地方,并绑定相应参数。

<button @click = "userClick">  用户  </button>

<botton @click = "profile">  档案   </button>

编写相应处理事件,根据不同传参方式,编写二种不同的传参风格,核心技术点利用router.push作路由 跳转

方式一     usreclick(){ this,$router.push('user' + this.userid)}

方式二      profile() {this.$router.push({ path:  '/profile', query: {name: 'xsy',  age: 20}  })}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<template>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 只编写了一个按扭功能-->
<button @click="text">测试按扭</button>
<button @click="text1">测试按扭</button>
<router-view/>
</template>
<script>
import { useRouter } from 'vue-router'
import { defineComponent } from 'vue' export default defineComponent({
setup () {
const router = useRouter()
const goTob = () => {
router.push({
// 下面关于 name: pro 说明用法,其中pro是预先在路由定义定义好的路由名字,在代码中通过name: 指定
name: 'pro',
query: {
name: 'xsy', age: 20
}
})
}
// vue3 中一定要返回函数,否则不能使用
return { goTob } }
})
</script>
<style lang="scss">
</style>

(广州南沙)vue知识点整理2021,主要是防止忘记防备快速翻看的更多相关文章

  1. Vue面试中,经常会被问到的面试题/Vue知识点整理

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  2. vue知识点整理

    1.对于mvvm的理解 mvvm是model-view-viewModel vue是以数据为驱动的,vue自身将dom和数据进行绑定,一旦创建绑定,dom和数据将保持同步,每当数据发生变化,dom也会 ...

  3. vue前端面试题知识点整理

    vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  4. web前端面试知识点整理

    一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...

  5. ACM个人零散知识点整理

    ACM个人零散知识点整理 杂项: 1.输入输出外挂 //读入优化 int 整数 inline int read(){ int x=0,f=1; char ch=getchar(); while(ch& ...

  6. Android 零散知识点整理

    Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...

  7. kafka知识点整理总结

    kafka知识点整理总结 只不过是敷衍 2017-11-22 21:39:59 kafka知识点整理总结,以备不时之需. 为什么要使用消息系统: 解耦 并行 异步通信:想向队列中放入多少消息就放多少, ...

  8. 【vue知识点】1)vue生命周期

    [vue知识点]2)vue登录认证

  9. JSP页面开发知识点整理

    刚学JSP页面开发,把知识点整理一下. ----------------------------------------------------------------------- JSP语法htt ...

  10. JS知识点整理(二)

    前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...

随机推荐

  1. 从零开始配置 vim(7)——自动命令

    这篇我们来谈论vim一个相当重要的东西--自动命令. 从编程的角度来看,自动命令有点类似于事件响应,或者回调函数之类.当外部发生某些事件的时候,自动执行事先定义好的一组命令. 定义一个自动命令的格式如 ...

  2. java8新特性知识整理

    目录 前言 Lambda 表达式 方法引用 函数式接口 Stream 流 构造流的几种方式 常用 api Collectors.toMap (List 转 Map) peek 和 map 区别 gro ...

  3. Volatility 内存数字取证方法

    计算机数字取证分为内存取证和磁盘取证,活取证与死取证,不管是那种取证方式,都应尽量避免破环犯罪现场,例如通过内存转储工具对内存进行快照,通过磁盘克隆工具对磁盘进行克隆,方便后期的分析工作,这里将研究内 ...

  4. Flask 实现简单的图片上传

    通过使用Flask框架实现一个简单的图片上传工具,当用户提交图片后会自动将图片保存到upload目录下,代码如下 import os from flask import Flask, request ...

  5. Tomcat8安装手记

    Tomcat安装虽然简单,稍不注意,就会坠入万丈深渊,记录痛苦的安装经历. 首先先介绍一下安装条件和正确的安装方式. 安装条件 系统已经安装jdk(前提) tomcat8压缩包 (可以去官网下载 或者 ...

  6. ECMAScript 2023 新特性预览

    ECMAScript 2023 的最终版本预计将于今年 6 月底发布.会议基本已经确定 了 ECMAScript 2023 的新功能列表,预计不会再有任何重大的编辑更改. 着该提案已被 ECMAScr ...

  7. CF1764H Doremy's Paint 2 题解

    题目链接:CF 或者 洛谷 高分题,感觉挺有意思的题,值得一提的是这个题的 \(1\) 和 \(3\) 版本却是两个基础题. 一开始以为跟这道差不多:P8512 [Ynoi Easy Round 20 ...

  8. Spring Cloud Config核心功能和原理解析

    配置管理的前世今生 随着技术的发展,配置项管理变得越来越简单,尽管如今它只限于管理业务属性或者配置初始化参数等等,但是当年它可肩负着 Spring IOC 的光荣使命,风光无限. 想当年刚入行的时候还 ...

  9. shell 两个数组比较,得到元素的并集、交集等

    linux shell 实现数组比较,取元素的并集.交集时,可以使用sort排序.uniq统计和awk数据过滤. shell 实现如下 file_list_1=("test1" & ...

  10. NC14522 珂朵莉的数列

    题目链接 题目 题目描述 珂朵莉给了你一个序列,有 \(\frac{n\times(n+1)}2\) 个子区间,求出她们各自的逆序对个数,然后加起来输出 输入描述 第一行一个数 n 表示这个序列 a ...