vue學習筆記十五、元件掛載過程及query方式帶引數的頁面跳轉

阿新 • • 發佈：2021-10-13

一、元件載入順序

元件掛載的順序 setup() -> onMounted()->onUnmounted()

主要作用：

setup():元件啟動入口

onMounted()：發請求向後端你請求資料、資料初始化

onUnmounted()：元件解除安裝時的生命週期，清除定時器清除閉包函式

二、專案結構截圖

三、程式碼：

預期流程：先建立一個Start.vue 登入http://localhost:8080/ 後先跳轉到Start.vue元件，在Start.vue組建中向Home.vue跳轉並帶有引數，觀察元件的載入順序和引數傳遞情況。

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,onMounted,onUnmounted} 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'
		  })
		  onMounted(()=>{
			  console.log('onMounted')
		  })
		  onUnmounted(()=>{

			  console.log('onUnmounted')
		  })
		  console.log('setup')
		  
		  let start = ()=> {
			//push如果是傳的物件的形式 就可以傳遞引數
			//query 傳參
			//push裡面還可以傳入name，  name是路由名字index.js裡定義的
			//query傳參path和name都可以  傳遞引數 引數在位址列裡 重新整理後引數還在
		  	router.push({
				//path : '/home',
				  name:'Home',
                  query:{
				  	//前面的name可以隨便取
				  	name:name.value,
				  	num:num.value,
				  	obj:JSON.stringify(obj)
				 } 
				})
		  }
		  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.query.name)
		console.log(route.query.num)
		console.log(route.query.obj)
		
		let num = ref(null)
		let name = ref('')
		let obj =ref({})
 
		return{
			  
			  
		}
	}
})
	
	
</script>

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