基本概念

RouterLink

不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。

RouterView

RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中

创建路由器实例

路由器实例是通过调用 createRouter() 函数创建的:

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

import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
]

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

这里的 routes 选项定义了一组路由，把 URL 路径映射到组件。其中，由 component 参数指定的组件就是先前在 App.vue 中被 <RouterView> 渲染的组件。

注册路由器插件

一旦创建了我们的路由器实例，我们就需要将其注册为插件，这一步骤可以通过调用 use() 来完成。

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

插件的职责包括：

1. 全局注册 RouterView 和 RouterLink 组件。
2. 添加全局 $router 和 $route 属性。
3. 启用 useRouter() 和 useRoute() 组合式函数。
4. 触发路由器解析初始路由。

访问路由和路由器

options API

在使用传统的 export default {} 语法时：

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')   // 访问路由器实例
      console.log(this.$route.path) // 访问当前路由对象
    },
  },
}

• this.$router：等价于 useRouter() 获取到的路由器。
• this.$route：等价于 useRoute() 获取到的当前路由。

setup API

在 <script setup> 或 setup() 函数中，无法直接使用 this，所以要通过组合式函数访问：

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter() // 路由器实例
const route = useRoute()   // 当前路由对象

const search = computed({
  get() {
    return route.query.search ?? ''
  },
  set(search) {
    router.replace({ query: { search } })
  },
})
</script>

模板中使用

<p>{{ $route.fullPath }}</p>