官方文档地址:https://router.vuejs.org/zh/guide/
- 安装vue-router
npm install vue-router
- 路由信息文件 /src/router/index.js
import { createMemoryHistory, createRouter } from 'vue-router'
#定义好相关的页面
import Home from '../page/Home.vue'
import Discover from '../page/Discover.vue'
import Cate from '../page/Cate.vue'
import Me from '../page/Me.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/Cate', component: Cate },
{ path: '/Discover', component: Discover },
{ path: '/Me', component: Me },
]
const router = createRouter({
history: createMemoryHistory(),
routes,
})
export default router
- 在main.js中引入
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router' // 第一步
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.use(router) // 第二步
app.mount('#app')
路径展示