2023-11-14 08:01PM
1. 安装配置
npm install vue@next
npm install vue-router@next
2. 在 src 目录下面创建 router/ 文件夹
3. 在 router/ 文件夹下面创建 index.js 文件
4. 然后你可以使用Vue Router 提供的 API 来定义和配置路由。
import { createRouter, createWebHistory } from 'vue-router';
import ZhuiFeng from '@/components/ZhuiFeng.vue';
import Home from '@/components/Home.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/zhuiFeng',
name: 'ZhuiFeng',
component: ZhuiFeng
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
5. 然后在主 App.vue 组件中，你需要使用 <router-view> 组件来渲染路由对应的组件
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
6. 最后，在 main.js 文件中，你需要将路由实例导入，并将其挂载到 Vue 应用程序中
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
如果你的 main.js 文件这样编写报错，那也可以编写为：
import { createApp } from 'vue';
import router from './router';
import App from './App.vue';
const app = createApp(App);
app.use(router);
app.mount('#app');
然后你的路由就配置好了
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论