路由（Vue Router）

用Vue + Vue Router創(chuàng)建單頁面應用非常簡單。當加入Vue Router時，需要將組件映射到路由上，讓Vue知道在哪里渲染它們。
路由基本例子

    <!-- 引入Vue 和 router --><script src="https://unpkg.com/vue@3"></script><script scr="https://unpkg.com/vue-router@4"></script><div id="app"><p><!-- router-link類似a標簽，最后訪問的結果會放到router-view中 --><router-link to="/">Go to Home</router-link><router-link to="/about">Go to About</router-link></p><!-- 路由出口，路由匹配到的組件渲染在 <router-view> --><router-view></router-view></div

路由的第一個Demo

    //1. 定義兩個模版const Home = {template:'<div>Home</div>'}const About = {template:'<div>About</div>'}//2. 自定義路由對象，也就是匹配模版所對應的路徑配置const routers = [{path:'/',component:Home},{path:'/about',component:About}]//3. 創(chuàng)建路由實例，并傳遞自定義的配置const router = VueRouter.createRouter({history:VoeRouter.createWebHashHistory(),routers:routers})//4. 創(chuàng)建Vue實例，并且使用路由const app = Vue.createApp({})//5.使用路由 ， 任意組件中可以使用`this.$router`的形式訪問router實例app.use(router)app.mount('#app')

動態(tài)路由

路由上可以添加動態(tài)字段來接受參數，稱為路徑參數。redirect的時候可以省略component配置。嵌套路由例外，如果一個路由記錄有children和redirect屬性，它也應該有component屬性。s

    //1. 自定義模版const User = {template:"<div>User</div>"}//2. 動態(tài)路由參數：id , 匹配到 /users/1 , /users/qq 等const router = [//path可以匹配多個路徑參數，/users/:id/details/:name{path:'/users/:id',compontent:User}]//3. 路由目標組件User中可以通過this.$route.params到形式獲取參數，json格式{id:1,name:'zqq'}const User = {template:"{{ $route.params.id }}"}

響應路由參數的變化
可以對同一組件路由參數變化做出響應，簡單的watch$route對象上的任意屬性

    //模版中，created函數，用this.watch觀察參數的變化const User{template:"<div>{{ this.$route.params }}</div>",created(){this.$watch(() => this.$route.params,(toParams,previousParams) =>{//路由參數變化的響應邏輯});}}

捕獲所有固定前綴路由或404 Not found路由

    //定義404路由匹配組件const NotFound = {template:"<div>{{ $route.params.pathMatch }}</div>"}//定義user-* 路由匹配組件const User = {template:"<div>{{ $route.params.users }}</div>"}//定義路由const routes = [//匹配所有其它路由沒有匹配到的路徑，并且放在pathMatch下，通過$route.params.pathMatch訪問匹配的所有路徑，路徑/a/b -> ["a","b"]{path:'/:pathMatch(.*)*',component:NotFound},//匹配所有的user-前綴的路徑，路徑user-123 -> 123{path:'/user-:users(.*)',component:User}]

嵌套路由

一些應用的UI由多層嵌套的組件組成，組件之中套著組件，可以使用嵌套路由表達這種關系,``children`關鍵字。

    //1. 定義一個組件，組件中嵌套著路由模版 <router-view>const home = {template:'<div>home組件</div><router-view></router-view>'}//定義一個子組件const child = {template:'<div>子組件</div>'}//2. 定義一個路由，包含子路由（嵌套路由）const routes = [{path:'/home',component:home,children:[{path:'hello',component:child}]}]

編程式導航

在Vue實例中，可以通過$router訪問路由實例，因粗可以通過編程式導航，調用$router實現路由跳轉。

//字符串路徑
router.push('/user/detail')//傳入對象路
router.push({path:'/user/detail'})//命名的路由，并加上參數，讓路由建立url
router.push({name:'user',params:{username:'zqq'}})//帶查詢參數，結果是register?plan=private
router.push({path:'register,query:{plan:'private'}'})//帶hash，結果是/about#team
router.push({path:'/about',hash:'#team'})

命名路由

除了path之外，可以為路由提供name

    const routes = [{path:'/user/:username',name:'user',component:User}]//導航到命名路由//1. 聲明式<router-link :to="{name:'user',params:{username:'zqq'}}">User</router-link>//2. 編程式router.push({name:'user',params:{username:'zqq'}})

命名視圖

有時候想同時展示同級多個視圖，而不是嵌套，如頁面的head、body、foot等?？梢栽诮缑鎿碛卸鄠€單獨命名的視圖router-view，而不是只有一個單獨的視圖。

    //組件const About = {template:'<div>This is about</div>'}//創(chuàng)建多個路由視圖，并命名<router-view name="leftSidebar"></router-view>//沒有設置名詞，默認為default<router-view></router-view><router-view name="rightSidebar"></router-view>//創(chuàng)建路由對象，指定渲染的視圖const routes = [{path:'/about',components:[leftSidebar:About]}]

重定向和別名

重定向也是通過routes配置來完成

    //從 home重定向到aboutconst routes = [{path:'/home',redirect:'/about'}]//重定向到目標也可以是一個命名的路由const routes = [{path:'/home',redirect:{name:'about'}}]//重定向到方法，動態(tài)返回重定向目標const routes = [{path:'/search/:searchText',redirect:to =>{//觸發(fā)的路由作為參數，toreturn {path:'/search',query:{q:to.params.searchText}}},//重定向這個路由{path:'/search'component://組件}}]

別名

可以為路由配置一個別名alias，用戶訪問別名的地址相當于訪問真實的path。如果路由有參數，需要在別名中包含它們。

    //這個路由在瀏覽器訪問/user 或 /users都會渲染UserComponent組件const routes = [{path:'/user',component:UserComponent,alias:'/users' //可以使用數組，['/users','/u']}]

路由組件傳參

當路由的設置props為true的時候，參數會被設置到組件props里。

    //定義組件 ,這里直接用{{ id }}獲取路由的參數，而不是this.$roter.paramsconst home = {props:['id'],template:'<div>{{ id }}</div>',}//路由配置const routes = [{path:'/home/:id',component:home, //對于有命名的視圖，需要為每個視圖開啟配置//{default:true,other-view;true}props:true}]

不同的歷史模式

在創(chuàng)建路由器實例時，history配置允許為們在不同的歷史模式中進行選擇。

1. Hash模式
   Hash模式時用createWebHashHistory創(chuàng)建的，它是在內部傳遞的實際URL之前使用一個哈嘻字符（#）。由于這部分URL從未被發(fā)送到服務器，所有它不需要在服務器層面上進行任何特殊處理。不過URL類似這樣https://127.0.0.1:8080/index.html#home

       import (createRouter,createWebHashHistory) from 'vue-router'const router = createRouter({history:createWebHashHistory(),routes:[//......]});
   

2. HTML5模式
   用createWebHistory創(chuàng)建HTML5模式，使用這種模式URL類似http://127.0.0.1:8080/user/id。不過由于應用時一個單頁面的客戶端應用，需要有對應的服務端配置，否則會得到404錯誤。

       const router = createRouter({history:createWebHistory(),routes:[//......]});