1. 安装router
yarn add vue-router
2. 路由配置
在 /src 目录下创建 views 目录,用来放置路由组件
在 /src 目录下创建 router 目录,然后分别创建 index.ts 和 routes.ts 文件
// /src/router/index.ts
//通过vue-router插件实现路由配置
import { createRouter, createWebHistory } from 'vue-router';
import { constantRoute } from './routes';
//创建路由器
let router = createRouter({
//路由模式hash
// history: createWebHistory(),
history: createWebHistory(),
routes: constantRoute,
//滚动行为
scrollBehavior() {
return {
left: 0,
top: 0
}
}
});
export default router;
// /src/router/routes.ts
import Layout from '../views/layout/Layout.vue'
//对外暴露配置路由
export const constantRoute = [
{
path: '/',
name: 'Layout',
component: Layout,
redirect: '/',
children: [
{
// 首页
path: '/home',
name: 'Home',
component: () => import('../views/home/Home.vue')
},
]
}
]
然后去 main.ts 里引入路由
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 引入路由
import router from './router'
// 获取应用实例对象
const app = createApp(App)
// 注册路由
app.use(router)
//将应用挂载到挂载点上
app.mount('#app')