vue router之學習筆記

用 vue.js + vue-router 建立單頁應用，是非常簡單的。使用 vue.js ，我們已經可以通過組合元件來組成應用程式，當你要把 vue-router 新增進來，我們需要做的是，將元件(components)對映到路由(routes)，然後告訴 vue-router 在**渲染它們。

在vue開發過程中會用到很多外掛程式，例如vue-router、vuex、vue-resource、mint ui、element-ui等，所有外掛程式的引用方式都如下所示：

（這裡是利用了vue-cli以及npm+webpack來搭建環境。如果不是，直接引用vue-router.js即可）

我們需要做的是，將元件(components)對映到路由(routes)，然後告訴 vue-router 在**渲染它們：

demo

1、在頁面上定義導航欄以及對應需要變化的模組

1

<
div 
id>
2<
h1h1
>
3<
p>45
67<
router-link 
to="/foo"
>go to foo
router-link
>
8<
router-link 
to="/bar"
>go to bar
router-link
>9
p>
1011
12<
router-view
>
router-view
>13
div>

1

//0. 如果使用模組化機制程式設計，匯入vue和vuerouter，要呼叫 vue.use(vuerouter)23
//1. 定義（路由）元件。4//
可以從其他檔案 import 進來
5 const foo = 
6 const bar = 78
//2. 定義路由9//
每個路由應該對映乙個元件。 其中"component" 可以是
10//
通過 vue.extend() 建立的元件構造器，
11//
或者，只是乙個元件配置物件。
12//
我們晚點再討論巢狀路由。
13const routes =[
14,
15
16]
1718//
3. 建立 router 例項，然後傳 `routes` 配置
19//
你還可以傳別的配置引數, 不過先這麼簡單著吧。
20const router = new
vuerouter()
2324//
4. 建立和掛載根例項。
25//
記得要通過 router 配置引數注入路由，
26//
從而讓整個應用都有路由功能
vue()

要注意，當對應的路由匹配成功，將自動設定 class 屬性值.router-link-active

demo

乙個『路徑引數』使用冒號:標記。當匹配到乙個路由時，引數值會被設定到this.$route.params，可以在每個元件內使用。

<

router-link 
:to="}"
>user
router-link
>

router.push(})

在動態路由的demo中，這裡的是最頂層的出口，渲染最高端路由匹配到的元件。同樣地，乙個被渲染元件同樣可以包含自己的巢狀。例如，在user元件的模板新增乙個

demo

1 const user =

1 const router = new

vuerouter(,
1117]18
}19]20 })

要注意，以/開頭的巢狀路徑會被當作根路徑。 這讓你充分的使用巢狀元件而無須設定巢狀的路徑。

此時，基於上面的配置，當你訪問/user/foo時，user的出口是不會渲染任何東西，這是因為沒有匹配到合適的子路由。如果你想要渲染點什麼，可以提供乙個 空的 子路由（例如demo中的userhome）

Vuerouter學習筆記

vue路由的作用 將元件 components 對映到路由 routes 然後告訴 vue router 在 渲染它們 前端路由是 對映關係 是路徑和元件的對映關係 vuerouter 路由器物件 然後 該物件有routes屬性 其為路由們配置，為陣列，陣列中每個值為乙個路由，路由就是相應的對映 步...

Shader之學習筆記八

獲取unity引擎源 580392083 逐頂點高光反射效果 shader unity shaders book chapter 6 specular vertex leve subshader lightmode 定義該pass在unity的光照流水線中的角色 cgprogram pragma v...

IOS之學習筆記一

2 autoreleasepool autoreleasepool自動釋放池，在裡面的 會自動釋放記憶體，不會記憶體洩漏 3 objective c 2.0引入arc 自動引用計數 機制和自動釋放池，降低記憶體管理難度 4 nslog 的ns是乙個字首，cocoa對其所有的函式 常量 型別前面都會增...