vue学习笔记 十六、params方式带参数的页面跳转

系列导航
vue学习笔记 一、环境搭建	vue学习笔记 二、环境搭建+项目创建	vue学习笔记 三、文件和目录结构
vue学习笔记 四、定义组件(组件基本结构)	vue学习笔记 五、创建子组件实例	vue学习笔记 六、ref定义单个数据
vue学习笔记 七、方法的定义和使用	vue学习笔记 八、toRef的使用	vue学习笔记 九、父子组件实例-基本结构
vue学习笔记 十、状态管理基础结构	vue学习笔记 十一、计算属性介绍	vue学习笔记 十二、通过计算属性获取定义的状态数据
vue学习笔记 十三、路由介绍	vue学习笔记 十四、页面跳转	vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转
vue学习笔记 十六、params方式带参数的页面跳转	vue学习笔记 十七、父子组件 ---> 子组件传值	vue学习笔记 十八、父子组件相互传递参数
vue学习笔记 十九、实例完整代码

一、知识点

params进行页面间参数传递的好处参数不会在url里出现，更加安全。

二、  项目结构截图

三、代码：

预期流程：先创建一个Start.vue 登录http://localhost:8080/    后先跳转到Start.vue组件，在Start.vue组建中向Home.vue跳转并带有参数，观察url地址里是否有参数及浏览器控制台的输出

index.js（和上一章节的没有任何变化）

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import Start from '../views/Start.vue'

//路由的配置属组
//paht：路由路劲 必须以/开头 必填
//component：对应的路由组件 必填
//name：路由的名字
const routes = [
  {
    path: '/',
    name: 'Start',
    component: Start
  },
  {
    path: '/home',
    name: 'Home',
  	//按需引入
  	//如果没有访问/about 就不会加载这个组件 节约性能
    component: () => import( '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
	//按需引入
	//如果没有访问/about 就不会加载这个组件 节约性能
    component: () => import( '../views/About.vue')
  }
]

//创建路由对象
const router = createRouter({
	//createWebHashHistory hash模式路径前面会多一个#号
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Start.vue

<template>
	<div>
		<button @click="start">开始任务</button>
	</div>
</template>

<script>
	import {defineComponent,ref } from 'vue'
	import {useRouter} from 'vue-router'
	export default defineComponent({
		name :'Start',
		setup(){
			//setup组件创建的过程
		  let router = useRouter()
		  let name = ref('jack')
		  let num =ref(10)
		  let obj =ref({
			  msg:'start'
		  })

		  let start = ()=> {
			//push如果是传的对象的形式 就可以传递参数
			//push里面还可以传入name，  name是路由名字index.js里定义的
			//params 传参只能用name  传递参数 参数不会在地址栏里  刷新后参数会消失
		  	router.push({
				name:'Home',
				//params模式传参
				 params:{
					//前面的name可以随便取
				 	name:name.value,
				 	num:num.value,
				 	obj:JSON.stringify(obj.value)
				 }
				})
		  }
		  return {
			  start
		  }
		}
	})	

</script>

<style>
</style>

Home.vue

<template>
	<div>
	   <h1>这是Home page</h1>
	</div>

</template>

<script>
	//编写js内容

import {defineComponent,computed,ref } from 'vue'
import {useStore} from 'vuex'
import {useRouter,useRoute} from 'vue-router'

export default defineComponent({
	name:'Home',
	components:{

	},
	setup(){
		//router 是全局路由对象
		let router = useRouter()
		console.log(router)
		//route是当前路由对象
		let route = useRoute()
		console.log(route.query)
		//query传递过来的参数 都是字符串的类型
		console.log(route.params.name)
		console.log(route.params.num)
		console.log(route.params.obj)

		return{

		}
	}
})

</script>

<style scoped lang="scss">
</style>

四、效果

1、进入Start.vue组件，点击“开始任务”按钮

2、进入Home.vue组件后浏览器里没有参数，并且在浏览器的控制台里看到了Home.vue输出了接受到的参数。