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輸出了接受到的參數。