如何在Vue3中使用router

如何在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分钟,怀疑人生