VUE3项目中的Router路由配置

一、安装路由

如果新建项目的时候已经有选择了Router选项就不需要再次安装了

npm install vue-router

二、src目录下新增router文件夹，并在文件夹中新建index.ts文件

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

const router = createRouter({
  history: createWebHashHistory(),//路由模式
  routes: [
    {
      path: '/',
      redirect: '/main'
    },
    {
      path: '/login',
      component: () => import('../views/login/Login.vue')
    },
    {
      path: '/main',
      component: () => import('../views/main/Main.vue')
    },
    {
      path: '/:pathMatch(.*)',
      component: () => import('../views/not-found/NotFound.vue')
    }
  ]
})

// 导航守卫

export default router

三、在main.ts 中挂载就可以使用了

import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

以上就是vue3项目中最基本的路由配置了，有的项目中还需要配置路由导航守卫，路由拦截等等，另外再看文档配置就可以了。