目錄
一、路由懶加載
二、三種模式
三、帶參數(shù)的動(dòng)態(tài)路由匹配
四、params和query傳參
五、編程式導(dǎo)航
六、全局前置守衛(wèi)
七、組件內(nèi)的守衛(wèi)
八、緩存頁面

一、 路由懶加載

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，這樣就會(huì)更加高效。

const Home = () => import('./views/Home.vue')

二、 三種模式

1、hash模式（vue-router默認(rèn)模式URL后面帶#）使用URL的hash值來作為路由，支持所有瀏覽器 缺點(diǎn)：只能改變#后面的來實(shí)現(xiàn)路由跳轉(zhuǎn)。

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

2、history模式（通過mode: 'history’來改變?yōu)閔istory模式）HTML5 （BOM）History API 和服務(wù)器配置 缺點(diǎn)：怕刷新如果后端沒有處理這個(gè)情況的時(shí)候前端刷新就是實(shí)實(shí)在在的請(qǐng)求服務(wù)器這樣消耗的時(shí)間很多還很慢。

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

3、abstract模式適用于所有JavaScript環(huán)境，例如服務(wù)器端使用Node.js。如果沒有瀏覽器API，路由器將自動(dòng)被強(qiáng)制進(jìn)入此模式。

const router = createRouter({
  history: createMemoryHistory(process.env.BASE_URL),
  routes
})

三、帶參數(shù)的動(dòng)態(tài)路由匹配

1、設(shè)置路由參數(shù)name,?代表可選參數(shù)。

  {
    path: '/Detail/:name?',
    name: 'Detail',
    component: Detail
  }

2、通過to傳遞參數(shù)name。

  <router-link to="/Detail/星星編程">進(jìn)入詳情</router-link>

3、接收參數(shù)name。

<template>
  <div class="detail">
    詳情頁面接收參數(shù)
    <p>{{name}}</p>
  </div>
</template>
<script>
import {  useRoute } from 'vue-router'
export default {
  name: 'Detail',
  setup() {
    const route = useRoute()  
    return {
      name :route.params.name
    }
  }
}
</script>

四、params和query傳參

1、params不支持路由傳參方式：

router.push({ path: '/Detail', params: { name }})

params導(dǎo)航欄顯示http://localhost:8080/Detail/星星編程
正確的傳參方式如下：

<template>
  <div class="home">
    <Button @click="jump">頁面跳轉(zhuǎn)</Button>
    <router-view/>
  </div>
</template>
<script>
import {  useRouter } from 'vue-router'
export default {
  name: "Home",
 setup(){
    const router = useRouter()  
    function jump(){
      let name = '星星編程';
      //router.push('Detail')
      //router.push({path: 'Detail'})
      //router.push({ path: `/Detail/${name}` })
      router.push({ name: 'Detail', params: { name }})
    }
    return {
      jump
    }
 }
};
</script>

2、query傳參,導(dǎo)航欄顯示http://localhost:8080/Detail?name=星星編程

 router.push({ name: 'Detail', query: { name }})
或者
 router.push({ path: 'Detail', query: { name }})

五、編程式導(dǎo)航

1、導(dǎo)航到不同的位置

 router.push({ name: 'Detail', query: { name }})

2、替換當(dāng)前位置

router.push({ path: '/Detail', replace: true })

3、橫跨歷史

router.go(1)

六、全局前置守衛(wèi)

導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。如下通過meta全局設(shè)置瀏覽器標(biāo)簽頁標(biāo)題：

router.beforeEach((to, from, next) => {
  next()
  document.title = to.meta.title
})

七、組件內(nèi)的守衛(wèi)

路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)：1、onBeforeRouteEnter 2、onBeforeRouteUpdate 3、onBeforeRouteLeave

onBeforeRouteLeave((to, from, next) => {
      console.log("將要離開當(dāng)前組件了，關(guān)注一下星星編程微信公眾號(hào)吧！");
      next();
    });

八、緩存頁面

當(dāng)我們不想每次跳轉(zhuǎn)路由都會(huì)重新加載頁面時(shí)（重新加載頁面很耗時(shí)），就可以考慮使用keep-alive緩存頁面了?？梢允褂胕nclude和exclude去指定自己想要緩存的頁面或不想緩存的頁面，組件名稱不能省略。

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>