Vue路由vue-router是官方的路由插件，能够轻松的管理 SPA 项目中组件的切换。 Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来

vue-router 目前有 3.x 的版本和 4.x 的版本，vue-router 3.x 只能结合 vue2 进行使用，vue-router 4.x 只能结合 vue3 进行使用

安装：npm install vue-router@3/4

快速上手Vue-Router4

Vue-Router3用法

<aside> 💡 这是Vue-Router3的写法 Vue.use(VueRouter)

</aside>

在router/index.js初始化router

import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import {createRouter, createWebHistory} from 'vue-router'

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

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

export default router

绑定vue-router

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";

var app = createApp(App)
app.use(router)

app.mount('#app')

在其他文件中使用router，通过点击RouterLink进行跳转

<template>
	<!--声明路由链接-->
	<router-link to="/book">书</router-link>
	<router-link to="/music">音乐</router-link>
	<!--声明路由占位符标签-->
	<router-view></router-view>
</template>

嵌套路由

只需要在一个路由后面加上children即可。

{path: '/book', component: Book, children: [
    {path: 'java', component: Java},
    {path: 'python', component: Python},
]},

Book组件中，必须也要有router-view

<template>
  <div>
  <h1>我是Book</h1>
    <router-link to="/book/java">java</router-link>
    <router-link to="/book/python">python</router-link>
    <router-view></router-view>
  </div>
</template>

如果没有的话，一个router-view是不可以渲染两个组件的，导致只能看到父亲组件

动态路由