登录  /  注册
首页 > web前端 > Vue.js > 正文

一文带你看看Vue Router4中的酷炫功能

青灯夜游
发布: 2021-05-24 10:59:07
转载
2385人浏览过

本篇文章和大家一下了解下vue router4中的酷炫功能。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

一文带你看看Vue Router4中的酷炫功能

Vue Router 4 已经发布了,我们来看看新版本中有哪些很酷的特性。【相关推荐:《vue.js教程》】

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中添加的一些新特性,大家可以到官网去了解一下更多的信息。

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

作者:Matt Maribojoc

更多编程相关知识,请访问:编程视频!!

以上就是一文带你看看Vue Router4中的酷炫功能的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号