vue3使用vue-routervue-router官网：https://router.vuejs.org/zh/ 基本

vue2升级vue3之后，配套的vue-router也升级为vue-router@4.x版本

vue-router4的语法和3的版本语法基本一致，但是有一些细微的修改。

vue-router官网：router.vuejs.org/zh/

vue@2 + vue-router@3 + vuex@3   options api

vue@3 + vue-router@4 + vuex@4    composition api
或
vue@3 + vue-router@4 + pinia@2(vuex5)    composition api

基本使用

(0)安装vue-router

yarn add vue-router
npm i vue-router
会自动安装与vue版本相匹配的router版本

(1)创建组件Home.vue和Login.vue

(2)创建文件router/index.js

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

// 1. 创建路由
// vue2: new Router()
const router = createRouter({
  // mode: 'hash', //vue2写法
  // 创建history模式的路由
  // history: createWebHistory(),
  // 创建hash模式的路由
  history: createWebHashHistory(),
  // 配置路由规则
  routes: [
    { path: '/home', component: () => import('../pages/Home.vue') },
    { path: '/login', component: () => import('../pages/Login.vue') },
  ],
})

export default router

（3）在main.js中引入

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

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

(4)App.vue中使用

<template>
  <ul>
    <li>
      <router-link to="/home">首页</router-link>
    </li>
    <li>
      <router-link to="/login">登陆</router-link>
    </li>
  </ul>

  <!-- 路由出口 -->
  <router-view></router-view>
</template>

组件中使用route与router

由于组件中无法访问this,因为无法访问this. $route与this.$ router

（1）通过useRoute()可以获取route信息

<script>
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.path)
    console.log(route.fullPath)
  },
}
</script>

（2）通过useRouter()可以获取router信息

<script>
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const login = () => {
      router.push('/home')
    }
    return {
      login,
    }
  },
}
</script>