-
安装指令
pnpm install vue-router
-
配置路由文件
/src/router/index.ts
- 路由文件单独提取
- src\router\index.ts
//通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from './router'
//创建路由器
const router = createRouter({
//路由模式hash
history: createWebHashHistory(),
routes: constantRoute,
//滚动行为
scrollBehavior() {
return {
left: 0,
top: 0,
}
},
})
export default router
- src\router\router.ts
//对外暴露配置路由(常量路由)
export const constantRoute = [
{
//登录路由
path: '/login',
component: () => import('@/views/login/index.vue'),
name: 'login', //命名路由
},
{
//登录成功以后展示数据的路由
path: '/',
component: () => import('@/views/home/index.vue'),
name: 'layout',
},
{
path: '/404',
component: () => import('@/views/404/index.vue'),
name: '404',
},
{
// 任意路由:上述匹配不到重定向到404
path: '/:pathMatch(.*)*',
redirect: '/404',
name: 'Any',
},
]
-
配置完路由后,需要在
mian.ts
中注册import router from './router' app.use(router)
-
在
App.vue
中使用router-view
,所有路由都是app.vue的子路由,子路由展示在父路由的router-view占位处<template> <div> <router-view></router-view> </div> </template>
-
组件内使用路由需要先引入路由对象
- layout布局