Vue -Vue相关技巧

路由

1. 路由传参

Vue路由传参主要分为query传参和params传参两种方式，在vue-router 4.1之后版本可能抛弃了params传参方式，官方建议query传参方式，下面对这两种方式进行介绍

1.1 query方式

• Vue2
  Vue2中采用“this.$router / this.$route”方式，“this.$router.push()”传递参数，“this.$route”获取参数，query传参可用path方式也可以用name方式（一般用path）

<script>
// 组件1 传递参数
export default{
	methods:{
		transfer(){
			let _path='/home'
			const _params={ a:1, b:2 }
			this.$router.push({path:_path, query:_params})
		}
	}
}
</script>

<script>
// 组件2 获取参数
export default{
	methods:{
		getParams(){
			const params=this.$route.query
			console.log(params)
		}
	}
}
</script>

• Vue3
  Vue3中不能用this，因此需要结合Vue3组合api方式

<script setup>
// 组件1 传递参数
import {useRouter}from 'vue-router'
const router =useRouter()
let _path='/home'
const _params={ a:1, b:2 }
router.push({path:_path, query:_params})
</script>

<script setup>
// 组件2 获取参数
import {useRoute}from 'vue-router'
const route=useRoute()
const params=route.query
console.log(params)
</script>

1.2 params方式

params传参必须采用name方式，path无法采用params传参

• Vue2

<script>
// 组件1 传递参数
export default{
	methods:{
		transfer(){
			let _name='home'
			const _params={ a:1, b:2 }
			this.$router.push({name:_name, params:_params})
		}
	}
}

</script>

<script>
// 组件2 获取参数
export default{
	methods:{
		getParams(){
			const params=this.$route.params
			console.log(params)
		}
	}
}
</script>

• Vue3
  由于vue-router在4.1版本可能抛弃了params参数传递方式，主要表现为采用“router.push({path:_path, query:_params})”传递参数后，route的params项为空“{}”，所以此params参数传递主要针对vue-router 4.0版本

<script setup>
// 组件1 传递参数
import {useRouter}from 'vue-router'
const router =useRouter()
let _name='home'
const _params={ a:1, b:2 }
router.push({path:_name, query:_params})
</script>

<script setup>
// 组件2 获取参数
import {useRoute}from 'vue-router'
const route=useRoute()
const params=route.query
console.log(params)
</script>

2. 路由传参可能遇到的问题

某些情况可能会导致路由传参失效，例如页面刷新，或者在Element Plus 的NavMenu 导航菜单中，多个el-menu-item对应同一个Vue组件，如下所示

<el-menu-item index="/home">选项1</el-menu-item>
<el-menu-item index="/home">选项2</el-menu-item>
<el-menu-item index="/home">选项3</el-menu-item>

此种特殊情况会导致第2次路由传参失效，根据需求，可以结合computed获取路由传递的参数，参数传递方式不变，但是需要抛弃“this.$route”和“const route=useRoute()”参数获取方式，采用从router/index.js路由配置文件直接获取router方式

具体代码如下

• Vue2

<script>
import router from '@/router'
export default{
	computed:{
		getParams(){
			return router.currentRoute.value.params
		}
	}
}
</script>

• Vue3

<script setup>
import router from '@/router'
const getParams = computed(() => {
  return router.currentRoute.value.params
})
console.log(getParams.value)
</script>

必要时可以结合watch检测参数获取情况，根据参数传递是否变化作相应的措施，如下所示：

• Vue2

<script>
import router from '@/router'
export default{
	watch：{
		getParams(newValue, oldValue){
			if (newValue !== oldValue) {
	          // 相应措施，例如刷新表格等等
	        }
		}
	}      
}
</script>

• Vue3

<script setup>
import router from '@/router'
import {computed, watch} from 'vue';
const getParams = computed(() => {
  return router.currentRoute.value.params
})
watch(getParams, (newValue, oldValue) => {
	if (newValue !== oldValue) {
	   // 相应措施，例如刷新表格等等
	}
})
</script>

Vue3 proxy

在Vue2中通常使用this指针实现某些操作，然而在Vue3中不能使用this，取而代之的可以使用proxy实现相同的操作

• Vue2

<template>
<div>
	<input ref="text" type="text">
</div>
</template>
<script >
export default{
	methods:{
		popInfo(){
			// 弹窗提醒
			this.$message.info("这是一个弹窗提醒")
		},
		getText(){
			// 获取 refs
			console.log(this.$refs.text)
		}
	}
}
</script>

• Vue3

<template>
	<input ref="text" type="text">
</template>
<script setup>
import {getCurrentInstance} from "vue"
// getCurrentInstance()只能存在于setup函数内部，不能存在于setup包含的子函数或子对象中
const {proxy} = getCurrentInstance()
function popInfo(){
	// 弹窗提醒
	proxy.$message.info("这是一个弹窗提醒")
}
function getText(){
	// 获取 refs
	console.log(proxy.$refs.text)
}
</script>

Vue3 props / emit

Vue3中父子传值与Vue2中有所不同，详细可见Vue.js官网https://cn.vuejs.org/guide/components/props.html#prop-validation

<!-- 父组件 -->
<template>
	<ChildComponent :msg="Msg" @parentCall="print" />
</template>
<script setup>
import ChildComonent from "@/components/ChildComponent"
const Msg=ref('一条消息')
function print(params){
	// 参数为可选项，由子组件传递过来
	console.log(params)// 向父组件发送了一条消息
}
</script>

<!-- 子组件 ChildComonent  方式1 -->
<template>
	<h1>{{props.Msg}}</h1>
</template>
<script setup>
import ChildComonent from "@/components/ChildComponent"
const props = defineProps(['Msg'])// <script setup>中的语法糖
/* 
	或者
	const props = defineProps({
		Msg:String
	})// <script setup>中的语法糖 
*/
const emit = defineEmits(['parentCall'])// <script setup>中的语法糖
console.log(props.Msg)// 一条消息
emit('parentCall','向父组件发送了一条消息')
</script>

<!-- 子组件 ChildComonent  方式2 -->
<template>
	<h1>{{props.Msg}}</h1>
</template>
<script>
export default{
	props:{
		Msg:String
	},
	/*
		或者
		props:['Msg']
	*/
	setup(props,context){
		console.log(props.Msg)// 一条消息
		console.log(context)
		context.$emit('parentCall','向父组件发送了一条消息')
		return{props}
	}
}
</script>

Vue强制刷新

• location.reload()
• this.$router.go(0)
• provide和inject

持续更新中….