Vue Router

Vue Router4 匹配 Vue3；Vue Router3 匹配 Vue2。

Vue Router 是 Vue 官方的路由管理器。Vue Router 基于路由和组件的映射关系，监听页面路径的变化，渲染对应的组件。

安装：

npm install vue-router。

基本使用：

Vue Router4 的基本使用：

// src/router/index.js
import {createRouter, createWebHashHistory} from 'vue-router'

import Home from '../components/Home.vue'
import About from '../components/About.vue'

// 1. 创建路由对象
const router = createRouter({
    // 配置路由映射关系，一个路径对应一个组件
    routes: [
        {path: '/', redirect: '/home'}, // 如果路径是 /，重定向到 /home 
        {path: '/home', component: Home},
        {path: '/about', component: About}
    ],
    // 配置采用的模式
    history: createWebHashHistory(),
})

export default router

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

const app = createApp(App)
// 2. 注册路由对象
app.use(router)
app.mount('#app')

// 可以使用 Vue Router 提供的 <router-link> 组件实现路径跳转
// src/App.vue。
<template>
  <!-- 3. 使用 Vue Router 提供的 <router-link> 组件实现路径跳转 -->
  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于</router-link>

  <!-- 4. 路径匹配到的组件将会显示在 <router-view> 这个占位组件处 -->
  <router-view></router-view>
</template>

<script setup>
</script>

<style scoped>
</style>   

// 也可以通过代码逻辑实现路径跳转。
// src/App.vue
<template>
  <div>
    <span @click="handleHomeNav">首页</span>
    <span @click="handleAboutNav">关于</span>
  </div>
   <!-- 4. 路径匹配到的组件将会替换 <router-view> 这个占位组件 -->
  <router-view></router-view>
</template>

<script setup>
// 3. 通过代码逻辑实现路径跳转
import { useRouter } from 'vue-router'
const router = useRouter()
const handleHomeNav = () => {
  router.push('/home')
}
const handleAboutNav = () => {
  router.push({path: '/about'}) 
}
</script>

<style scoped>
</style>   

Vue Router3 的基本使用：

import Home form '../componnets/Home .vue'
import About form '../componnets/About .vue'

// 1. 创建 router 实例
const router = new VueRouter({
  // 传入 routes 配置定义路由
  routes: [
	  { path: 'home', component: Home },
	  { path: '/about', component: About }
  ]
})

// 2. 通过 router 配置参数注入路由
const app = new Vue({
  router
}).$mount('#app')

<div id="app">
  <p>
    <!--  3. 使用 router-link 组件来导航，通过传入 to 属性指定链接 -->