如何在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的挂载,然后使用routerconst app = createApp(App)app.use(router)app.mount('#app')

结尾,关于为什么我要写这个

因为我在{path: '/xx', component: xx}, 中的component达成了components.始终不能使用<router-view></router-view>来展现组件,最后一看源码

哦,我多打了个s啊
浪费了我宝贵的40分钟,怀疑人生

如何在Vue3中使用router相关推荐

中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
如何在Vue3中使用Hooks
在Vue的options Api时代,mixins是我们抽离一个功能的重要手段,而在使用composition Api的Vue3时代,我们可以用hooks来实现类似mixins的功能. 相比mixin ...
如何在vue3中优雅地使用v-model？
文章目录 ps:vue3中推荐使用的是reactive写法,文中这种格式只是为了和vue2做对照,只是为了凸显vue3中对v-model的改进,仅供参考. Vue中的数据绑定 v-bind v-bin ...
Vue--》如何在Vue3中书写TSX
在vue2的时候就已经可以使用 jsx 语法,但是不是很友好,写起来是一件很痛苦的事情,所以你很少见到有人会在vue2中书写 jsx 语法,官方也不建议我们在vue2中进行书写 jsx 的代码风格: ...
Vue3中的Vue Router初探
对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变 ...
如何在 Deno 中构建一个 URL 短链生成器
作者 | 韩亦乐责编 | 欧阳姝黎原文地址:How to Build a URL Shortener in Deno 原文作者:Akash Joshi 译者:hylerrix 备注:本 ...
软件部署在不同linux上,如何在Linux中安装和部署keepalived
如何在Linux中安装和部署keepalived 发布时间:2020-05-27 13:56:19 来源:亿速云阅读:407 作者:鸽子 keepalived的部署 keepalived在很多高可用 ...
vue3 中使用动画技术
vue3 中使用动画技术作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...

如何在Vue3中使用router

如何在Vue3中使用router

官方提供 `createWebHashHistory`和 `createRouter`

`createWebHashHistory`

`createRouter`

`routes`

结尾,关于为什么我要写这个

如何在Vue3中使用router相关推荐

最新文章

热门文章

如何在Vue3中使用router

如何在Vue3中使用router

官方提供 createWebHashHistory和 createRouter

createWebHashHistory

createRouter

routes

结尾,关于为什么我要写这个

如何在Vue3中使用router相关推荐

最新文章

热门文章

官方提供 `createWebHashHistory`和 `createRouter`

`createWebHashHistory`

`createRouter`

`routes`