前言

今天面試被問到 vue的動態(tài)路由，我竟然沒有回答上來，感覺不是什么難得問題。好久沒有看vue-router的文檔，很多用的東西和概念沒有對上。回來一看什么是動態(tài)路由就傻眼了。看來有必要把vue -router相關(guān)知識總結(jié)一下，好丟人的感覺。

單頁面應(yīng)用的工作原理

我理解的單頁面工作原理是通過瀏覽器URL的#后面的hash變化就會引起頁面變化的特性來把頁面分成不同的小模塊，然后通過修改hash來讓頁面展示我們想讓看到的內(nèi)容。

那么為什么hash的不同，為什么會影響頁面的展示呢？瀏覽器在這里面做了什么內(nèi)容。以前#后面的內(nèi)容一般會做錨點，但是會定位到一個頁面的某個位置，這個是怎么做到的呢，和我們現(xiàn)在的路由有什么不同。（我能想到一個路由的展示就會把其他路由隱藏，是這樣的嗎）后面會看一看寫一下這個疑惑，現(xiàn)在最重要的是先把基本概念弄熟。

正文

當(dāng)你要把 vue-router 添加進(jìn)來，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們

起步

//*** router-link 告訴瀏覽器去哪個路由//*** router-view 告訴路由在哪里展示內(nèi)容<div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 組件來導(dǎo)航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view></div>// 1. 定義（路由）組件。// 可以從其他文件 import 進(jìn)來const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定義路由// 每個路由應(yīng)該映射一個組件。 其中"component" 可以是// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器，// 或者，只是一個組件配置對象。// 我們晚點再討論嵌套路由。const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }]// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。const router = new VueRouter({ routes // （縮寫）相當(dāng)于 routes: routes})// 4. 創(chuàng)建和掛載根實例。// 記得要通過 router 配置參數(shù)注入路由，// 從而讓整個應(yīng)用都有路由功能const app = new Vue({ router}).$mount('#app')// 現(xiàn)在，應(yīng)用已經(jīng)啟動了！

動態(tài)路由匹配

相當(dāng)于同一個組件，因為參數(shù)不同展示不同的組件內(nèi)容，其實就是在 vue-router 的路由路徑中使用『動態(tài)路徑參數(shù)』

const router = new VueRouter({ routes: [ // 動態(tài)路徑參數(shù) 以冒號開頭 { path: '/user/:id', component: User } ]})