社区编辑申请
注册/登录
一篇学会Vue Router 4 的变化及炫酷特性
开发 前端
Vue 3 引入了createApp API,该API更改了将插件添加到Vue实例的方式。因此,以前版本的Vue Router将与Vue3不兼容。

Vue Router 4 已经发布了,我们来看看新版本中有哪些很酷的特性。

Vue3 支持

Vue 3 引入了createApp API,该API更改了将插件添加到Vue实例的方式。因此,以前版本的Vue Router将与Vue3不兼容。

Vue Router 4 引入了createRouter API,该API创建了一个可以在Vue3中安装 router 实例。

  1. // src/router/index.js 
  2.  
  3. import { createRouter } from "vue-router"
  4.  
  5. export default createRouter({ 
  6.   routes: [...], 
  7. }); 
  1. // src/main.js 
  2.  
  3. import { createApp } from "vue"
  4. import router from "./router"
  5.  
  6. const app = createApp({}); 
  7. app.use(router); 
  8. app.mount("#app"); 

History 选项

在 Vue Router的早期版本中,我们可以mode 属性来指定路由的模式。

hash 模式使用URL哈希来模拟完整的URL,以便在URL更改时不会重新加载页面。history 模式利用 HTML5 History API 来实现URL导航,也是无需重新加载页面。

  1. // Vue Router 3 
  2. const router = new VueRouter({ 
  3.   mode: "history"
  4.   routes: [...] 
  5. }); 

在Vue Router 4中,这些模式已被抽象到模块中,可以将其导入并分配给新的history 选项。这种额外的灵活性让我们可以根据需要自定义路由器。

  1. // Vue Router 4 
  2. import { createRouter, createWebHistory } from "vue-router"
  3.  
  4. export default createRouter({ 
  5.   history: createWebHistory(), 
  6.   routes: [], 
  7. }); 

动态路由

Vue Router 4 提供了addRoute方法实现动态路由。

这个方法平时比较少用到,但是确实有一些有趣的用例。例如,假设我们要为文件系统应用程序创建UI,并且要动态添加路径。我们可以按照以下方式进行操作:

  1. methods: { 
  2.   uploadComplete (id) { 
  3.     router.addRoute({ 
  4.       path: `/uploads/${id}`, 
  5.       name: `upload-${id}`, 
  6.       component: FileInfo 
  7.     }); 
  8.   } 

我们还可以使用以下相关方法:

  • removeRoute
  • hasRoute
  • getRoutes

导航守卫可以返回值并非next

导航守卫是Vue Router的钩子,允许用户在跳转之前或之后运行自定义逻辑,例如 beforeEach,beforeRouterEnter等。

它们通常用于检查用户是否有权访问某个页面,验证动态路由参数或销毁侦听器。

在版本4中,我们可以从hook 方法中中返回值或Promise。这样可以方便快捷地进行如下操作:

  1. // Vue Router 3 
  2. router.beforeEach((tofromnext) => { 
  3.   if (!isAuthenticated) { 
  4.     next(false); 
  5.   } 
  6.   else {  
  7.     next(); 
  8.   } 
  9. }) 
  10.  
  11. // Vue Router 4 
  12. router.beforeEach(() => isAuthenticated); 

这些只是版本4中添加的一些新特性,大家可以到官网去了解一下更多的信息。

~完,我是前端小智,去保建了,我们下期见~

作者:Matt Maribojoc 译者:前端小智 来源:stackabuse

原文:https://vuejsdevelopers.com/topics/vue-router/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2022-06-24 07:15:53

Vuehistory模式

2020-08-23 08:56:52

Vue Router 前端Vue

2022-02-02 21:29:39

2021-11-11 08:20:47

2021-05-06 09:06:12

Vue Router组件视图

2020-03-20 10:25:41

2021-08-12 07:01:23

2017-08-01 07:31:55

2021-08-02 06:49:46

同话题下的热门内容

字节的前端监控 SDK 是怎样设计的TestOps完全手册:工作流、生命周期、团队和流程使用Python快速搭建接口自动化测试脚本实战总结你需要知道的TypeScript高级类型不要在 Python 中使用循环,这些方法其实更棒!哪种编程语言最适合开发网页抓取工具?从 Islands Architecture 看前端有多卷反应式JavaScript:前端架构的演变

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号