Vue Router 4的一些新功能

Vue Router 4目前处于测试阶段。让咱们看一下这个新版本中的一些很酷的功能。

Vue3支持

Vue 3引入了 createApp API，它改变了将插件添加到Vue实例的方式。因为这个缘由，过去版本的Vue Router将不兼容Vue 3。

Vue Router 4引入了 createRouter API，能够建立一个可与Vue 3一块儿安装的路由器实例。

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 hash来模拟完整的URL，这样当URL发生变化时，页面不会被从新加载。history 利用HTML5 History API来实现URL导航，而不须要从新加载页面。

src/router/index.js

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

在Vue Router 4中，这些模式已被抽象到模块中，能够将其导入并分配给新的 history 选项。这种额外的灵活性使你能够根据须要自定义路由历史记录的实现。

src/router/index.js

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

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

动态路由

当路由使用新的 .addRoute 方法运行时，Vue Router 4将容许你添加动态路由。

这可能不是你天天都会使用的功能，可是确实有一些有趣的用例。例如，假设你正在为一个文件系统应用程序建立一个用户界面，而且但愿动态添加路径，你能够这样作：

src/components/FileUploader.vue

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

你还可使用如下相关方法：

• removeRoute
• hasRoute
• getRoutes

导航守卫能够返回值而不是next

导航守卫是Vue Router的钩子，容许用户在导航事件以前或以后运行自定义逻辑，如 beforeEach、`beforeRouterEnter等。

它们一般用于检查用户是否有权限访问某个页面，验证动态路由参数，或者销毁监听器。

自定义逻辑运行后，next 回调用于确认路由、声明错误或重定向。

在第4版中，你能够从钩子中返回一个值或Promise来代替。这将容许像下面这样方便的速记。

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

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

总结

这些只是版本4中新增的一些新功能。您能够在Vue Router Next仓库中了解更多信息。

感谢Eduardo和团队为Vue Router 4所作的巨大努力！

资源

最近整理了一份优质视频教程资源，想要的能够关注公众号便可免费领取哦！