Vue路由

Vue作為單頁面應用的框架，路由是必不可少的。現在也很多引入vuejs去使用，今天只說腳手架建立的專案的路由。

我們先看一下，腳手架建好專案之後路由的結構，是一個json，path就是路徑，就是瀏覽器輸入的路徑，name是這個元件的名字，在路由傳參的時候param可以用到。

component就是模板，就是這個路由所要顯示的模板。

剛建立的時候路徑是/，就是根，意思就是開啟之後顯示的元件。一般我們建立之後開啟路由是這樣的http://localhost:8080/#/，所以顯示的是HellpWorld這個模板對應的頁面。比如我們新建頁面test1，然後引入

這時候http://localhost:8080/#/顯示的就是component對應的test1頁面。

一般我們的專案都會有指定的首頁，那麼vue有個路由重定向redirect

那麼這時候你開啟地址之後，路由就會自動跳轉到http://localhost:8080/#/index，也就是路徑/index。

然後有多少頁面，在路由每一個頁面就要先import引入，，然後json裡面按照格式新增路徑和模板。Path是自己起的名字，主要就是對應的模板，比如我路由路徑這樣寫

{ path: '/aaaaaaa/dskjgka/oo', name: 'index', component: Test1 }

那我瀏覽器路徑http://localhost:8080/#/aaaaaaa/dskjgka/oo顯示的還是test1這個頁面。當然，我們路由名字一般會對應的頁面內容去起。

這是最簡單的路由，如果我們按照這樣的格式去使用路由，那麼我們打包出來之後，會把所有的頁面都打包成一個檔案vendorJS。

這個函式，我一開始覺得這個引數可以去掉，但是發現是不能去了，所以就只能乖乖按照這個格式去書寫，具體的暫時還沒有去研究為什麼要這樣書寫。

還有一種寫法，官方推薦的

這兩種寫法都是路由懶載入，也就是按需載入的寫法，這樣打包之後就會拆分成很多個JS。

歡迎關注Coding個人筆記 公眾號