Vue-Router4详解

发布时间：2023-05-19

Vue-Router4详解

一、Vue-Router4官网

Vue-Router是Vue.js官方推出的一款用于构建SPA应用的路由库，它已经成为Vue.js中一个非常重要的组成部分。Vue-Router4相对于前面的版本，不仅增加了一些新的特性，而且用法也有了一些变化。在Vue3中，Vue-Router已经成为了一个独立的包，完全不再是Vue.js的一个插件。下面是Vue-Router4官网的地址。

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

二、Vue-Router4过渡抖动

在Vue3以前的版本中，我们可以采用vue-router的transition属性进行页面切换的过渡效果，但是在Vue-Router4.0中这个属性已经废弃，它被v-slot和transition组合的方式所代替。如果您之前使用了transition过渡，在Vue-Router4.0版本下，您可以使用v-slot实现过渡效果。

<transition mode="out-in">
  <router-view v-slot="{ Component }">
    <transition name="slide-up-down" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</transition>

三、Vue-Router4原理

Vue-Router4原理其实就是由两个方面组成：路由器对象和路由器配置。其中路由器对象是由Vue-Router提供的，而路由器配置包括路由匹配规则、中间件、拦截器等信息。Vue-Router的处理原理是根据路由匹配规则，通过createMatcher函数，把路由表解析成一份映射表，然后通过Vue.mixin把beforeRouter和afterRouter钩子函数注入到每个组件中。这样在组件中运行时，就可以通过访问$route来获取路由信息，并根据$route.params来获取路径参数的值。

const matcher = createMatcher(routes)
const beforeEachs = []
const afterEachs = []
Vue.mixin({
  beforeCreate() {
    if (this.$options.router) {
      this._routerRoot = this
      this._router = this.$options.router
      this._router.init(this)
      Vue.util.defineReactive(this, '_route', this._router.history.current)
    } else {
      this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
    }
    registerInstance(this, this._router)
    addBeforeHook({beforeEach: beforeEachs, afterEach: afterEachs}, this)
  },
  destroyed() {
    unregisterInstance(this)
    removeBeforeHook({beforeEach: beforeEachs, afterEach: afterEachs}, this)
  }
})

四、Vue-Router4传参

在Vue-Router4中，我们可以使用props来对路由进行传参。其中可以使用路由参数props: true来快速取出所有动态路由的参数并将其设置成组件的props，传递的参数将被合并入该组件的props中。此外，也可以使用props: {myProp: 'myDefaultValue'}来传递默认值。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User,
      props: true
    },
    {
      path: '/blog/:blogId',
      name: 'blog',
      component: Blog,
      props: { myProp: 'defaultValue' }
    }
  ]
})

五、Vue-Router4动态路由

Vue-Router4支持动态路由的创建，因此我们可以在运行时向路由表添加动态路由，在路由表中动态添加路由可以通过路由的addRoute方法，在路由表中动态删除路由可以通过路由的removeRoute方法。

// 动态添加路由
const Blog = { template: '<div>blog</div>' }
const blogRoute = { path: '/blog', component: Blog }
router.addRoute(blogRoute)
// 动态删除路由
const blogRoutes = router.getRoutes().filter(route => route.path !== '/blog')
router.removeRoute('/blog')

六、Vue-Router4.0重置路由

在Vue-Router4.0中，您可以通过resetRouter()方法来更改包含在VueRouter实例中的路由。resetRouter()方法将完全重新安装路由，创建全新的history对象，因此所有已订阅该history对象的功能将被重置。

const router = createRouter({
  ...
})
// 进行重置路由
function resetRouter() {
  const newRouter = createRouter({
    ...
  })
  router.matcher = newRouter.matcher
}

七、Vue-Router4动态添加路由

在Vue-Router4中，您可以通过控制台动态添加路由来进行开发。Vue-Router4中的addRoute方法可以支持异步调用，方法也可以接收一个数组作为参数来添加多个路由，并且可以使用await语法来等待其完成。因此，我们可以使用import动态加载组件，然后将其和路由添加到路由表中。

const router = createRouter({
  ...
})
// 异步的加载路由
async function importComponent(route) {
  const { default: component } = await import(`./${route.component}.vue`)
  return component
}
// 动态添加路由
function addRoutes(routes) {
  router.addRoute(routes)
}
// 示例：添加新的页面1
async function addNewPage1() {
  const NewPage1 = {
    template: '<div>NewPage1</div>'
  }
  addRoutes([{ path: '/newPage1', component: NewPage1 }])
}
// 示例：添加新的页面2
async function addNewPage2() {
  const NewPage2 = await importComponent({ component: 'NewPage2' })
  addRoutes([{ path: '/newPage2', component: NewPage2 }])
}

八、Vue-Router4.0动态路由刷新空白

如果您在导航守卫中使用$nextTick，当您动态更改路由时，您的页面可能会导致空白刷新，这是由于Vue3的更改传播策略引起的。解决它只需要使用队列主动等待更新DOM。

beforeRouteUpdate(to, from, next) {
  this.$nextTick(() => {
    this.myData = null;
    next();
  })
}

九、总结

以上就是Vue-Router4的详细解析，包括Vue-Router4官网、Vue-Router4过渡抖动、Vue-Router4原理、Vue-Router4传参、Vue-Router4动态路由、Vue-Router4.0重置路由、Vue-Router4动态添加路由和Vue-Router4.0动态路由刷新空白。我们可以根据自己的实际需求，选择使用其中的一些特性，在Vue.js的开发中快速构建高效的SPA应用。

推荐文章