嚐鮮vue3.0- 看完就開幹（4）

背景

延續前面的三篇文章：

• 嚐鮮vue3.0-從ToDoList開始（1）
• 嚐鮮vue3.0-瞭解變化(2)
• 嚐鮮vue3.0-tyepscript開發組件(3)

距離正式開發還須要介紹一下路由變化，這樣就算對vue3.0開發的以有了初步瞭解，以及完成項目的基礎建設。

---

安裝vue-router

//目前最新版本
npm i --save vue-router@4.0.0-beta.9
"vue-router": "^4.0.0-beta.9"

//配置
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  //createWebHistory() hostory模式
  history: createWebHashHistory(),//hash模式 
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    // 動態路徑參數 以冒號開頭
    { path: '/home', component: () => import('../views/home.vue') },
  ],
})
export default router
//使用 main.js
app.use(router)

---

scoped slot（做用域插槽）

• 刪除tag屬性（vue2.0 router文檔tag介紹）

本來是想要 <router-link> 渲染成某種標籤,可是使用起來會不夠直觀清晰

//以前
//tag="button"  router-link將會渲染成button標籤
<router-link to="/" tag="button">
    <Icon>home</Icon><span class="xs-hidden">Home</span>
</router-link>
//以後 使用scoped slot替換
<router-link to="/">
  <button role="link">
    <Icon>home</Icon><span class="xs-hidden">Home</span>
  </button>
</router-link>

• 刪除 event屬性（vue2.0 router文檔event介紹）
  默認是'click',聲明能夠用來觸發導航的事件。能夠是一個字符串或是一個包含字符串的數組。也被刪除，用做用域插槽代替。
• 中止自動將點擊事件分配給內部錨點
• 新增scoped-slot API
• 添加custom prop以徹底自定義router-link的渲染

• 簡寫方式（有坑）

  //從第二篇的地方有介紹過v-slot有簡寫方式，可是這裏值得注意，下方的寫法在瀏覽器渲染卻有不通
  <router-link to="/about" #custom="{ href }">
     <a :href="href">1.{{href}}</a>
   </router-link>
   <router-link to="/about" v-slot:custom="{ href }">
     <a :href="href">2.{{href}}</a>
   </router-link>
  
   <router-link to="/about" custom v-slot="{ href }">
     <a :href="href">3.{{href}}</a>
   </router-link>

渲染以後的結果只有第三個正常顯示

---
### vue-router的API

和vue3.0同樣，api所有走import，不放在this裏面（打印 require('vue-router')）

---

meta屬性（給路由附加數據的屬性）

{ path: '/my', meta: { requiresAuth: true }}
//以前
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !auth.loggedIn()) next('/login')
  else next()
})
//建議3.0
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth))
  // ...do sth
})

---

router-link-active/router-link-exact-active class類名

• 別名和子路由也將激活
• params不一致不會被激活

假設當前路由/parent/1/child/2

url	active	exact active
/parent/1/child/2	✅	✅
/parent/1/child/3	X	X
/parent/1/	✅	X

---

提供能夠在路由運做時增刪路由記錄的API

//my.vue
import {useRouter,useRoute} from 'vue-router' //見上文介紹的vue-router目前的API
setup(props,ctx){
   console.log(useRouter(window.location.pathname));//相似原來的 this.$router
   console.log(useRoute(window.location.pathname));//相似原來的 this.$route
 }

//路由記錄的值
const routeRecord: RouteRecord = {
  path: '/new-route',
  name: 'NewRoute',
  component: NewRoute
}

router.addRoute(route: RouteRecord) //新增一個路由記錄
router.removeRoute(name: string | symbol) //刪除
router.hasRoute(name: string | symbol)://判斷是否存在
router.getRoutes(): RouteRecord[] //獲取記錄列表

---

路由跳轉

• 明肯定義路由跳轉失敗，而後如何捕獲錯誤
• 路由跳轉將是Promise形式

• 將router.push與router.afterEach，router.onError保持一致

  router.push('/dashboard').then((failure) => {
    if (failure) {
      failure instanceof Error // true
      failure.type // NavigationFailure.canceled 【aborted，canceled，duplicated】
    }
  }).catch(()=>{...})

---

同時使用keep-alive與transition

//之前
<transition :name="transitionName" >
  <keep-alive >
    <router-view></router-view>
    <router-view></router-view>
  </keep-alive>
</transition>
//以後
<router-view v-slot="{ Component }">
  <transition :name="transitionName" mode="out-in">
    <component :is="Component"></component>
  </transition>
</router-view>

---

滾動行爲

不經常使用，vue2.0在官網上的介紹

//改動不大，只是爲了更加貼近原生,將屬性名統一了
{ selector:..,x: 0, y: 200,behavior }
// becomes
{ el:...,left: 0, top: 200,offset }

---

在激活某路由的時候增長邏輯判斷，將路由視圖顯示其餘內容（好比一些loading狀態）

<router-view :route="routeWithModal"></router-view>
const App = {
  computed: {
    routeWithModal() {
      if (backgroundView) {
        return this.$router.resolve(backgroundView)
      } else {
        return this.$route
      }
    }
  }
}

---

路由守衛不用使用next，也能夠直接返回某個值或者是Promise

// 以前
router.beforeEach((to, from, next) => {
  if (!isAuth) next(false)
  else next()
})

// 之後能夠
router.beforeEach(() => isAuth)

---

最後

安裝瞭解完路由的相關變更，直接能夠開幹了。整個過程下來，vue3.0的變化仍是能夠接受的，在向更好的方向發展。推薦使用vite也很好，不少東西都內置，開箱即用。至於typesciprt，只是vue3.0更好的支持了ts語法，可是用不用，怎麼用仍是看項目以及開發者自己。目前介紹vue3.0的使用，到此其實已經能夠開始寫項目了。還有Vue Composition API沒介紹，可是簡單和經常使用的API在上面已經用過了，後期再更新。

github代碼地址

介紹到這裏，有遺漏歡迎你們補充，喜歡的動手收藏點贊。