pnpm install vue-router
在src新建文件夹views和router
1.1基本 路由配置 :hash 路由模式
// 对外配置路由
import Login from '@/views/login/index.vue'
import Home from '@/views/home/index.vue'
import Error from '@/views/404/index.vue'
export const constantRoute = [
{
path: '/login',
component: Login,
name: 'login',
},
{
path: '/home',
component: Home,
name: 'home',
},
{
path: '/404',
component: Error,
name: '404',
},
{
path: '/:pathMatch',
redirect: '/404',
name: 'Any',
},
]
//通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from './routes'
//创建路由器
const router = createRouter({
// 路由模式hash
history: createWebHashHistory(),
routes: constantRoute,
// 滚动行为//每次进入页面将页面重置到顶部
scrollBehavior() {
return {
left: 0,
top: 0,
}
},
})
export default router
1.2注册路由
// 引入路由
import router from './router/index'
// 注册路由
app.use(router)