1、安装
npm i vue-router@4
router4的使用方法
注意3和4 的使用步骤是不一样的
vue3报错“ Uncaught TypeError: Cannot read property ‘use‘ of undefined”_御前吹水的博客-CSDN博客
2、创建组件
views/Home.vue
3、引入vue-router,并初始化路由对象
router/index.js
import {createRouter, createWebHistory} from 'vue-router'
import Home from '../views/Home'
import Detail from '../views/Detail.vue'
import TestVuex from '../views/TestVuex'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes:[
{
path:'/',
component:Home
},
{
path:'/detail/:id',
component:Detail
},
{
path:'/test/vuex',
component:TestVuex
}
]
}
export default router
4、注入路由
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')
5、 呈现组件
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
6、 切换路由