入门

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

示例

App.vue

<template>
  <h1>Hello App!</h1>
  <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main>
    <RouterView />
  </main>
</template>

在这个例子中使用功能两个由Vue Router提供的组件: RouterLink 和 RouterView。

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

RouterView组件是Vue Router的占位符,用于渲染匹配的组件.它会在路由变化时更新.它不一定要在App.vue中,可以放在任何地方但它需要在某处导入,否则View Router不会渲染任何东西

创建路由实例

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参数指定的组件会在<RouterView>中渲染。

注册路由

createApp(App).use(router).mount('#app')
// 等价于
const app = createApp(App)
app.use(router)
app.mount('#app')

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

访问路由器和当前路由

如果你是从 ES 模块导出路由器实例的，你可以将路由器实例直接导入到你需要它的地方。

在组件模板中，路由器实例将被暴露为 $router。这与同样被暴露的 $route 一样，但注意前者最后有一个额外的 r。

在选项是API中:

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    },
  },
}

在组合式API中,不能通过this访问实例,Vue Router也提供了响应 读者是函数来访问:

<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>

以通过 useRouter() 和 useRoute() 来访问路由器实例和当前路由

约定

单文件组件

Vue Router经常配合打包工具和单文件组件一起使用,但并不是必须的.如果是用Vue和Vue Router的全局构建版本,这些库江北暴露为全局对象,而不是导入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
<script>
// 直接使用全局变量
const app = Vue.createApp({...})
app.use(VueRouter)
</script>

而使用模块化构建版本时:

import { createApp } from 'vue'
import { createRouter } from 'vue-router'

const app = createApp({...})
const router = createRouter({...})
app.use(router)

router 和 route

• router : 路由器实例,包含路由器配置和路由器实例方法
  组合式API中为this.$router
  选项式API中为 useRouter()
• route : 当前路由对象,包含当前路由信息
  组合式API中为this.$route
  选项式API中为 useRoute()

RouterView 和 RouterLink

这两个组件是全局注册的,不需要额外的应用就可以用在任意模板中,但也可以在组件中局部注册

需要注意的时,如果在DOM中使用模板,组件的名字必须是 kebab-case 风格且不支持自闭合标签。