이 기사에서는 Vue Router4의 멋진 기능을 보여줍니다.-View.js-php.cn

이 기사에서는 Vue Router4의 멋진 기능을 보여줍니다.

青灯夜游

풀어 주다： 2021-06-04 19:27:14

앞으로

2571명이 탐색했습니다.

이 기사에서는 Vue Router4의 멋진 기능에 대해 알려드립니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

이 기사에서는 Vue Router4의 멋진 기능을 보여줍니다.

Vue Router 4가 출시되었습니다. 새 버전에는 어떤 멋진 기능이 포함되어 있는지 살펴보겠습니다. [관련 권장 사항: "vue.js Tutorial"]

Vue3 지원

Vue 3에는 플러그인이 Vue 인스턴스에 추가되는 방식을 변경하는 createApp API가 도입되었습니다. 따라서 이전 버전의 Vue Router는 Vue3과 호환되지 않습니다. 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

Vue Router 4에는 Vue3에 설치할 수 있는 라우터 인스턴스를 생성하는 createRouter API가 도입되었습니다.

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

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

로그인 후 복사

rrreee

History 옵션

Vue Router의 이전 버전에서는 mode 속성을 사용하여 라우팅 모드를 지정할 수 있었습니다. hash 모드는 URL 해싱을 사용하여 URL이 변경될 때 페이지가 다시 로드되지 않도록 전체 URL을 시뮬레이션합니다. history 모드는 HTML5 History API를 사용하여 페이지를 다시 로드하지 않고도 URL 탐색을 구현합니다.

rrreee