一篇学会VueRouter4的变化及炫酷特性

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

创新互联公司于2013年成立，先为剑川等服务建站，剑川等地企业，进行企业商务咨询服务。为剑川企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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的钩子，允许用户在跳转之前或之后运行自定义逻辑，例如 beforeEach，beforeRouterEnter等。

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

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

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

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

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

网页题目：一篇学会VueRouter4的变化及炫酷特性
转载来于：http://www.shufengxianlan.com/qtweb/news2/268502.html

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

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

猜你还喜欢下面的内容