首頁 > 文章 > web前端 > vue router: dynamic route matching動態路由匹配

vue router: dynamic route matching動態路由匹配

不言原創: 2018-07-09 13:50:302122瀏覽

這篇文章主要介紹了關於vue router: dynamic route matching動態路由匹配，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

最近在把幾個Vue單一頁面應用程式合併升級成多頁面應用，減少程式碼冗餘和重複打包。由於是在原有的Django結構和Vue-cli配置裡塞東西，所以會有很多為了配合Django而產生的配置更改，不具有普遍的移植性，僅供參考。

坑會慢慢填入的，先從路線開始。主要想法就是一個入口對應一個單頁應用，每個單頁應用程式都是獨立的，互相之間不存在路由跳轉，而單頁應用中存在多個元件之間的路由跳轉，因此每個單頁面應用程式都有自己的路由配置。

動態路由符合，就是把某種模式配對到的所有路由全部都對應到同一個元件。

根據官方文件給出的實例，例如我們有一個RequestList組件包含了所有的Request的基本信息，點擊某個Request的ID可跳轉查看該Request的詳細信息，對於ID不同的所有Request都可以用RequestDetail元件來渲染，可以透過「動態路徑參數（Dynamic Segment）」來達到效果。
這樣/demo/request/1 和、/demo/request/2都會對應到相同的路由，參數透過路由傳遞給元件RequestDetail，可透過 this.$route.params存取傳遞到的參數，參數可能是一個，也可能是多個。

import RequestList from '@/components/RequestList';
import RequestDetail from '@/components/RequestDetail';

export default {
  base: '/demo/',
  mode: 'history',
  linkActiveClass: 'active',
  routes: [
    {
      path: '/',
      name: 'requestList',
      component: RequestList,
    },
    {
      path: '/request/:requestId',
      name: 'requestDetail',
      component: RequestDetail,
      props: props, //路由传参
    },
  ],
};

有時候也可以配置成有查詢參數的路由，但個人覺得這樣的路由/demo/request?requestId=1長得不是很美觀，而且把參數暴露給用戶了。

{
    path: '/request',
    name: 'requestDetail',
    component: RequestDetail,
    props: route => ({ requestId: route.query.requestId }), //路由传参
},

這週在多頁面應用程式中加了一個新的單頁面應用，配置了動態路由，在dev開發模式下卻只能匹配到根路由/ ，一直cannot get子路由，什麼都渲染不出來。一開始也沒有找到合適的關鍵字去搜尋相關issue,折騰了大半天終於發現有人也遇到了同樣的問題why-does-vue-router-webpack-dev-server-shows-cannot-get-path-on- page-refresh。

It turns out it was a bug in the Vue webpack template on Windows

Ok, fine :)

其實這個Bug在現在的Vue webpack template裡已經解決了，在webpack.dev.conf.js的devServer 配置中有historyApiFallback. 當我們使用HTML5 History API的時候，index.html會在404找不到資源的時候被回，這裡的index.html是什麼?

historyApiFallback: {
    rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
    ],
},

在dev開發模式下，其實是相當於在本地起了一台虛擬的伺服器，一個單頁應用對應一個html模板文件，入口對應的所有相關組件的js css程式碼都會被注入到這個html模板文件裡，所以我們的路由配置也需要到相應的模板文件裡的js代碼去解析、匹配。但是由於我的多頁面應用配置，當我在地址欄輸入/demo/request/1，其實是找不到匹配的資源的，需要返回到相對應的html模板文件中去,這也和你dev配置的範本檔路徑有關。

devServer: {
  historyApiFallback: {
      rewrites: [
        { from: /^\/demo/, to: path.posix.join(config.dev.assetsPublicPath, 'demo/index.html') },
        { from: /^\/test/, to: path.posix.join(config.dev.assetsPublicPath, 'test/index.html') },
      ],
  },
}

很多前端萌新在剛接觸Vue的時候，都會選擇用Vue-cli去搭項目，模板的配置在一定程度上可配置也很完整，足夠滿足一般單頁應用的需求，確實省事。但前端早已不是只注重程式碼，而是關注整個專案架構的設計，一個好的結構相當於成功了一半，後續開發流程會非常流暢。

前端並沒有外行人想像的那麼簡單，雖然也沒有很複雜，給自己的定位是前端架構師，而不是程式碼的搬運工。所以非常建議想要在前端深入的各位，把Vue-cli的Webpack配置解讀理順（React同理），再把webpack的文檔完整擼一遍，基本可以把前端工程化的程式碼分割(Code Splitting)和懶加載(Lazy Loading)理解大半了，然後嘗試自己寫配置，設計架構。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

vue router: dynamic route matching動態路由匹配

相關文章