yarn add vue-router@4
或者
npm i vue-router@4 -S
main.js里面
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
//注意use要在mount之前
createApp(App).use(router).mount('#app')
新建路由文件夹
路由inde里面
import {createRouter, createWebHistory} from 'vue-router'
import routes from './router'
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
route里面
const router = [
{
name: 'Index',
path: '/',
component: ()=> import('../pages/index.vue'),
children:[{
name: 'com',
path: '/com',
component: ()=> import('../components/HelloWorld.vue'),
}]
},
]
export default router
首页里跳转用
this.$router.push('/com')
我的文件结结构
这样嵌套路由也做好了