VueRouter4的一些很酷的功能

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

创新互联建站-专业网站定制、快速模板网站建设、高性价比蓟州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式蓟州网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖蓟州地区。费用合理售后完善，十年实体公司更值得信赖。

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所做的巨大努力!

网页标题：VueRouter4的一些很酷的功能
文章路径：http://www.shufengxianlan.com/qtweb/news22/130672.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容