vue3-router

9月18号,vue3.0正式发布。这里简单讲一下新版的vue-router。

我们以这个代码为例子,来讲一讲vue3中该如何使用路由。

QuickStart

npm run dev

访问localhost:8080

代码解读

直接进入main.js中,可以看到从vue中导入了两个东西:createApp, h。这是两个函数,第一个是用来创建应用,第二个则是之前的render()函数中的第一个参数createElement,用来创建虚拟节点。

Hash or History?

路由采取HashRoute还是HistoryRoute取决于在created()钩子函数中给window对象增加的事件监听器,可以看到代码中我们添加的是popstate,这是一个历史路由改变时触发的事件。如果我们想使用哈希路由,则使用hashchange事件即可。在新版本的路由中,不再采用<router-link>以及<router-view标签来进行路由的跳转了。而是采用正常的a标签,通过点击事件来进行history.pushState进行历史路由状态的改变。当pushState发生时,地址栏中的路由会改变为该函数的第三个参数,也就是a标签中的href属性的值。而一旦pushState函数发生后,就会触发popstate事件(定义在main.js中),这时定义好的响应式数据:currentRoute的值会改变为新的路由的值,然后对应所展示的页面就会随之改变。

以上就是vue3中路由的基本使用方法了,可以看出其实就是将<router-link<router-view>的内部实现给暴露出来,它们分别是a标签以及slot插槽。这样虽然对新手不太友好,但是提供了更多的灵活度,这也是vue3与vue2之间的主要区别。

加载评论