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项目中最基本的路由配置了,有的项目中还需要配置路由导航守卫,路由拦截等等,另外再看文档配置就可以了。