Vue Router4笔记（一）

目录

安装

实例变化

mode修改

isReady()替代onReady() 

scrollBehavior的变化

融入Composition API后的写法变迁

---

Vue 3.x版本已经发布。对应新版本的Vue，vue-router 4.x做了许多突破性的变化

安装

1、适用于jsx编译场景

直接下载/CDN

https://unpkg.com/vue-router@4

Unpkg.com 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。 你也可以通过像 https://unpkg.com/vue-router@3.0.0/dist/vue-router.js 这样的 URL 来使用特定的版本或 Tag。

2、npm

适用于基于client和vite 

npm install vue-router@4

实例变化

before（Vue Router3）

分离router模块

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes'

Vue.use(Router)

const router = new Router({
  routes
})

export default router

main.js引入

// main.js
import Vue from 'vue'
import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

after（Vue Router4）

分离router模块

// router/index.js
import { createRouter } from 'vue-router'
import routes from './routes'

const router = createRouter({
  routes
})

export default router

 main.js引入

// main.js
import { createApp } from 'vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

特别提醒：所有导航都是异步的，如果使用transition，需要在安装应用程序之前等待路由器准备就绪

app.use(router)
// router.onReady() 已经替换为 router.isReady()
// 不带任何参数并返回 Promise
router.isReady().then(() => app.mount('#app'))

mode修改

mode base 已被移除

new Router({
    mode: "history",
    base: process.env.BASE_URL,
    routes: routers
})

带来新的取代写法

mode → history

vue-router 3	vue-router 4
history	createWebHistory()
hash	createWebHashHistory()
abstract	createMemmoryHistory()

base选项移除，修改为createWebHistory等上述方法的第一个参数传递

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  // history: createWebHistory(),
  history: createWebHistory(process.env.BASE_URL),//base作为第一参数选项process.env.BASE_URL
  routes
})

export default router

isReady()替代onReady() 

注意点：在SSR中，需要手动传递适当的history

let history = isServer ? createMemoryHistory() : createWebHistory()
let router = createRouter({ routes, history })
// somewhere in your server-entry.js
router.push(req.url) // request url
router.isReady().then(() => {
  // resolve the request
})

scrollBehavior的变化

scrollBehavior 中返回的对象与 ScrollToOptions 类似：x 改名为 left，y 改名为 top

融入Composition API后的写法变迁

回顾vue-router 3中，分别提供this.$route对象以及this,$router方法。并且直接挂载到vm原型链，在开发过程中可以通过this访问使用。

新的更新，写法彻底颠覆。将采用es6写法，将router相关组件封装，使用时分别引入相关模块即可。这里需要注意的是，由于vue3开发过程中会使用到setUp()对象，所以vue-router 3的老旧写法不再支持，这里变更为useRouter和useRoute

这里粘出基本用法以及对路由监听的写法思路

import { watch, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

async function fetchUser(id) {}

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const userData = ref()

    // 返回 name 是 About 的路由
    // 不存在会报错
    console.log(router.resolve({ name: 'About' }))

    watch(
      () => route.params,
      async newParams => {
        userData.value = await fetchUser(newParams.id)
      }
    )

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query
        }
      })
    }

    return {
      pushWithQuery,
      userData
    }
  }
}

注意点：全新的vue-router 4中，在访问不存在的路由组件时，项目会在浏览器抛出404。相对于旧版本返回空白页面要合理，小编很赞成这部分细节的改动

onBeforeRouteLeave、onBeforeRouteUpdate

onBeforeRouteLeave类似于beforeRouteLeave，添加一个导航守卫，在当前位置的组件将要离开时触发。但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。

onBeforeRouteUpdate类似于beforeRouteUpdate，添加一个导航守卫，在当前位置即将更新时触发。但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。

import { ref } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

async function fetchUser(id) {}

export default {
  setup() {
    const userData = ref()

    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      if (!answer) return false
    })

    onBeforeRouteUpdate(async (to, from) => {
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })

    return {
      userData
    }
  }
}