欢乐颂小说结局是什么,我欲封天txt下载,已完本玄幻小说排行榜

新聞中心

這里有您想知道的互聯網營銷解決方案

VueRouter4的一些很酷的功能

Vue Router 4目前處于測試階段。讓我們看一下這個新版本中的一些很酷的功能。

創(chuàng)新互聯建站-專業(yè)網站定制、快速模板網站建設、高性價比薊州網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式薊州網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋薊州地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

Vue3支持

Vue 3引入了 createApp API，它改變了將插件添加到Vue實例的方式。由于這個原因，過去版本的Vue Router將不兼容Vue 3。

Vue Router 4引入了 createRouter API，可以創(chuàng)建一個可與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發(fā)生變化時，頁面不會被重新加載。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: [],
  
  
  
  });

動態(tài)路由

當路由使用新的 .addRoute 方法運行時，Vue Router 4將允許你添加動態(tài)路由。

這可能不是你每天都會使用的功能，但是確實有一些有趣的用例。例如，假設你正在為一個文件系統應用程序創(chuàng)建一個用戶界面，并且希望動態(tài)添加路徑，你可以這樣做：

src/components/FileUploader.vue：

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

你還可以使用以下相關方法：

removeRoute
hasRoute
getRoutes

導航守衛(wèi)可以返回值而不是next

導航守衛(wèi)是Vue Router的鉤子，允許用戶在導航事件之前或之后運行自定義邏輯，如 beforeEach、beforeRouterEnter等。

它們通常用于檢查用戶是否有權限訪問某個頁面，驗證動態(tài)路由參數，或者銷毀監(jiān)聽器。

自定義邏輯運行后，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://fisionsoft.com.cn/article/copjehp.html

新聞中心

其他資訊