P5858 「SWTR-03」Golden Sword
vue-router
vue3專案中如何配置路由
下載vue-router,在路由檔案中引入相關依賴
建立路由資訊物件陣列
建立路由管理器物件並對外丟擲
在main.js使用use(router)方法，將路由管理器物件與當前vue專案相關聯
在專案中設定路由導航router-link與路由出口router-view
常見面試題：route、routes、router的區別
route:一組路由資訊物件
{path:'/foo',component:Foo}
routes：路由資訊物件陣列
const routes =[ {path:'/foo',component:Foo}, {path:'/bar',component:Bar}, {path:'/user',component:User}
]
router:路由管理物件
const router=createRouter({ })
動態路由
定義：我們經常需要把某種模式匹配到的所有路由，全部對映到同個元件。
例如：我們有一個User元件，對於所有ID各不相同的使用者，都要使用這個元件渲染
一個【路徑引數】 使用冒號：標記；
//動態路由的設定
{path:'/user/:id/:name/:age',component:user}
<router-link to="/user/1/tom/18">user-1</router-link> <router-link to="/user/2/bob/20">user-2</router-link>
可以在一個路由中設定多段【路徑引數】
動態路由的傳參
1.params傳參
定義動態路由：
{path: '/user/:id/:name/:age',component:User}
傳輸引數：
<router-link to="/user/1/tom/18>user-1</router-link>
接收引數：
<p>使用者id--{{$route.params.id}}</p>
<p>使用者名稱稱--{{$route.params.name}}</p> <p>使用者年齡--{{$route.params.age}}</p>
2.props傳參
值為布林值的形式
定義動態路由：
{path:'/user/:id/:name/:age',component:User,props:true}
傳輸引數：
<router-link to="/user/1/tom/18">user-1 </router-link>
<router-link to="/user/2/jack/28">user-2 </router-link>
<router-link to="/user/3/mary/18">user-3 </router-link>
接收引數：
props:['id','name','age']
值為函式的形式
定義動態路由：
{path:'/user',name:'user',component:User,props:function(route){return{id:route.params.id,name:route.params.name,age:route.params.age}}}
傳輸引數：
<router-link v-bind:to="{name:'user',params:{id:4,name:'test',age:25}}">user-4 </router-link>
接收引數：
props:['id','name','age']
動態路由切換時的特點
動態路由當路由發生切換時，並不會重新渲染路由元件，而會使用已經渲染過的路由元件（只是會修改路由引數值）。這樣增加了程式的高效及時性；另一方面，元件的生命週期鉤子回撥函式將不會再次呼叫。
狀態管理庫vuex
vuex是一個專門為vue.js應用程式開發的狀態管理庫。狀態就是指元件之間共享的資料
vue專案中配置狀態管理庫vuex的流程
1.下載並引入vuex相關內容
2.建立狀態管理庫物件store
3.對外丟擲store物件
4.在main.js中將store與當前專案相關聯
store狀態管理庫物件重要組成部分
state：元件之間共享的資料集合
元件中獲取方法
1.直接獲取 this.$store.state.xxx;
vue3合成API------setup()
Vue3最重要的新特性之一
作用：之前vue物件規定了我們必須把某一類資料放到某一個結構中，這樣在一定程度上對我們的程式碼進行了強制的分割。而在vue3 中我們引入了setup（）合成API語法，他可以將某資料關聯的內容都整合到一個部分，即使setup（）中的內容越來越多，也會圍繞著大而不亂的形式開發專案。
setup特點
1、setup（）結構中定義的變數，函式都需要return之後才可以在模板中使用， 2.setup（）是處於created生命週期之前的函式，也就是說data，methods中的資料是無法訪問到的，setup（）結構中的this指向undefined
ref ：在setup中只能包裝字串或數字形式的資料（值），使其變為響應式資料 reactive： 在setup中包裝物件，陣列形式的資料（物件/陣列），使其變成響應式資料 refs： 可以直接在html模板中使用物件的屬性名當變數，不需要用 . 訪問
setup（）結構中如何使用生命週期函式
元件之間的資料通訊
父子元件之間資料通訊
第一種：父-->子 props傳遞資料；子-->父 觸發自定義事件的形式