vue3-router@4的使用，跟vue2-router@3的使用语法上有一定的变化

基本使用

(0)安装vue-router

  yarn add vue-router
  或
  npm add vue-router

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

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

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

// 1. 创建路由
const router = createRouter({
  // 创建history模式的路由
  // history: createWebHistory(),
  // 创建hash模式的路由
  history: createWebHashHistory(),
  // 配置路由规则
  routes: [
  //注意，这里的文件后缀名不能省略，vue2可以省略，但vue3不行
    { path: '/home', component: () => import('../views/Home.vue') },
    { path: '/login', component: () => import('../views/Login.vue') },
  ],
})
//导出路由
export default router

（3）在main.js中引入

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

//注意这里的挂载.mount('#app')一定得写在最后面
   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>