首先安装路由
npm install vue-router@4
在src目录下创建 index.js文件
在里面写入如
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: function () {
return import('../views/AboutView.vue')
}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
在main.js中导入路由
let app = createApp(App);
app.use(router).mount('#app')
在App.vue写入
template>
<router-view/><!-- 这是路由出口 -->
</template>
到这里路由的基本配置就完成了