Vue3 Router 4 使用经验总结

2023-09-20 06:33:39

Vue3 Router 4 是 Vue3 的官方路由库，它为 Vue 应用提供了丰富的路由功能。在 Vue2 中，我们使用 Vue-router 来管理路由，而 Vue3 中，我们使用 Router4 来管理路由。Router4 与 Vue-router 有很多相似之处，但也有一些差异。

Router4 和 Vue-router 的主要差异

语法不同。 Router4 使用了一种新的语法，与 Vue2 中的 Vue-router 的语法不同。
API 不同。 Router4 的 API 与 Vue-router 的 API 不同，一些 API 的名称和用法发生了变化。
路由模式不同。 Router4 引入了一种新的路由模式，称为 "history" 模式。这种模式使用浏览器的历史记录 API 来管理路由，而 Vue-router 使用的是 "hash" 模式。

Router4 的使用

下面，我们通过一个简单的例子来演示如何使用 Router4。

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在上面的代码中，我们首先导入了必要的模块，然后定义了路由数组。路由数组中，每个路由对象都包含了一个路径和一个组件。路径是路由的 URL，组件是路由对应的组件。接下来，我们创建了一个路由实例，并将其导出。

在 Vue 应用中，我们可以通过 router-view 组件来渲染当前路由的组件。

<router-view />

Router4 的 SEO

Router4 支持 SEO，但需要我们进行一些额外的配置。我们需要在 Vue 应用中安装 vue-router-seo 包，然后在 Vue 应用的入口文件中进行一些配置。

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueRouterSeo from 'vue-router-seo'

Vue.use(VueRouter)
Vue.use(VueRouterSeo, {
  titleTemplate: '%s - My App',
  description: 'This is my app'
})

const router = new VueRouter({
  // ...
})

new Vue({
  router
}).$mount('#app')