如何在Vue3中使用router
//在vue的js或ts文件中引入vue-router的方法
import {
createWebHashHistory,createRouter} from 'vue-router'
官方提供 createWebHashHistory
和 createRouter
createWebHashHistory
createWebHashHistory
指哈希模式createWebHistory
指history模式- 无论哪一种都需要在路由实例中做出设置
createRouter
使用createRouter
创建路由实例,
- 包含history和routes两个属性
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/Aa', component: Aa},
]
})
routes
复数,所以看到就猜是数组
官方文档上也写了,果然就是数组
最后使用Vue.ues()来使用
所以完整的代码是这样:
//引入vue-router的方法
import {
createWebHashHistory,createRouter} from 'vue-router'
//创建路由实例
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/xx', component:xx},
]
})
//拆分vue3的挂载,然后使用router
const app = createApp(App)
app.use(router)
app.mount('#app')
结尾,关于为什么我要写这个
因为我在{path: '/xx', component: xx},
中的component达成了components.始终不能使用<router-view></router-view>
来展现组件,最后一看源码
哦,我多打了个s啊
浪费了我宝贵的40分钟,怀疑人生