IDC

Vue Router 4 的相对之前的变化

作者:admin 2021-07-30 我要评论

作者:Matt Maribojoc 译者:前端小智 来源:stackabuse 有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
作者:Matt Maribojoc
译者:前端小智
来源:stackabuse

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

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

Vue3 支持

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

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

// src/router/index.js

import { createRouter } from "vue-router";

export default createRouter({
  routes: [...],
});
// src/main.js

import { createApp } from "vue";
import router from "./router";

const app = createApp({});
app.use(router);
app.mount("#app");

History 选项

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

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

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

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

// Vue Router 4
import { createRouter, createWebHistory } from "vue-router";

export default createRouter({
  history: createWebHistory(),
  routes: [],
});

动态路由

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

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

methods: {
  uploadComplete (id) {
    router.addRoute({
      path: `/uploads/${id}`,
      name: `upload-${id}`,
      component: FileInfo
    });
  }
}

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

  • removeRoute
  • hasRoute
  • getRoutes

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

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

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

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

// Vue Router 3
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) {
    next(false);
  }
  else { 
    next();
  }
})

// Vue Router 4
router.beforeEach(() => isAuthenticated);

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

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


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://vuejsdevelopers.com/t...

交流

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。


本文转自网络,版权归原作者所有,原文链接:https://segmentfault.com/a/1190000040426680

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 2020年12月超实用设计干货大合集

    2020年12月超实用设计干货大合集

  • 深入理解JavaScript中的箭头函数

    深入理解JavaScript中的箭头函数

  • Skywalking分布式链路追踪入门

    Skywalking分布式链路追踪入门

  • 连续3年稳居第一,全球1240万用户,Jav

    连续3年稳居第一,全球1240万用户,Jav

腾讯云代理商
海外云服务器