Vue3中路由的引入和基本使用

安装并引入路由

安装

npm install vue-router@4
或者
yarn add vue-router@4

引入

1. 创建router文件夹，并在其中创建 router.ts和router.config.ts
   
2. 配置router.ts文件

const routers = [
  {
   
    path:'/',
    redirect:'/home',
  },
  {
   
    path: '/home',
    //采用路由懒加载的形式引入
    component:() => import('@/pages/Home/index.vue')
  }
]
export default routers

3. 配置router.config.ts

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


const router = createRouter({
   
// 这里使用hash模式路由
  history: createWebHashHistory(),
  // @ts-ignore
  routes,
})
// 导出router
export default router

4. 在main.ts里引入router

import {
    createApp } from 'vue'