日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

Vue Router 4 已經(jīng)發(fā)布了，我們來看看新版本中有哪些很酷的特性。

創(chuàng)新互聯(lián)公司于2013年成立，先為劍川等服務(wù)建站，劍川等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為劍川企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

Vue3 支持

Vue 3 引入了createApp API，該API更改了將插件添加到Vue實(shí)例的方式。因此，以前版本的Vue Router將與Vue3不兼容。

Vue Router 4 引入了createRouter API，該API創(chuàng)建了一個可以在Vue3中安裝 router 實(shí)例。

 
 
 
 

  
  
  
  
// 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 選項(xiàng)

在 Vue Router的早期版本中，我們可以mode 屬性來指定路由的模式。

hash 模式使用URL哈希來模擬完整的URL，以便在URL更改時不會重新加載頁面。history 模式利用 HTML5 History API 來實(shí)現(xiàn)URL導(dǎo)航，也是無需重新加載頁面。

 
 
 
 

  
  
  
  
// Vue Router 3
  
  
  
  
const router = new VueRouter({
  
  
  
  
  mode: "history",
  
  
  
  
  routes: [...]
  
  
  
  
});
 
 
 
 

在Vue Router 4中，這些模式已被抽象到模塊中，可以將其導(dǎo)入并分配給新的history 選項(xiàng)。這種額外的靈活性讓我們可以根據(jù)需要自定義路由器。

 
 
 
 

  
  
  
  
// Vue Router 4
  
  
  
  
import { createRouter, createWebHistory } from "vue-router";
  
  
  
  

  
  
  
  
export default createRouter({
  
  
  
  
  history: createWebHistory(),
  
  
  
  
  routes: [],
  
  
  
  
});
 
 
 
 

動態(tài)路由

Vue Router 4 提供了addRoute方法實(shí)現(xiàn)動態(tài)路由。

這個方法平時比較少用到，但是確實(shí)有一些有趣的用例。例如，假設(shè)我們要為文件系統(tǒng)應(yīng)用程序創(chuàng)建UI，并且要動態(tài)添加路徑。我們可以按照以下方式進(jìn)行操作：

 
 
 
 

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

我們還可以使用以下相關(guān)方法：

• removeRoute
• hasRoute
• getRoutes

導(dǎo)航守衛(wèi)可以返回值并非next

導(dǎo)航守衛(wèi)是Vue Router的鉤子，允許用戶在跳轉(zhuǎn)之前或之后運(yùn)行自定義邏輯，例如 beforeEach，beforeRouterEnter等。

它們通常用于檢查用戶是否有權(quán)訪問某個頁面，驗(yàn)證動態(tài)路由參數(shù)或銷毀偵聽器。

在版本4中，我們可以從hook 方法中中返回值或Promise。這樣可以方便快捷地進(jìn)行如下操作：

 
 
 
 

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

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

這些只是版本4中添加的一些新特性，大家可以到官網(wǎng)去了解一下更多的信息。

~完，我是前端小智，去保建了，我們下期見~

分享名稱：一篇學(xué)會VueRouter4的變化及炫酷特性
文章URL：http://www.dlmjj.cn/article/djegojc.html