Vue Router （一）基礎篇

簡介

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

安裝

npm install vue-router

如果在乙個模組化工程中使用它，必須要通過vue.use()明確地安裝路由功能：

import vue from 'vue'import vuerouter from 'vue-router'vue.use(vuerouter)

//

1. 定義、引用（路由）元件。 
const foo = 
import bar from '@/views/bar.vue' 
//2. 定義路由 
const routes =[
, 
] //
3. 建立 router 例項，然後傳 `routes` 配置 
const router = new
vuerouter()
//4. 建立和掛載根例項。通過 router 配置引數注入路
動態路由分配
兩種方式傳遞$route.params和$route.query
模式
匹配路徑
獲取引數（路由資訊物件）
/user/:username  
/user/ligang
$route.params.username
/user?:username
/user?username=ligang
$route.query.username
巢狀路由
1routes: [,6//
匹配 /user/:id/profile
7 , 8//
匹配 /user/:id/posts
9 10
] 11 }]

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

程式設計式導航

除了使用建立 a 標籤來定義導航鏈結，我們還可以借助 router 的例項方法，通過編寫**來實現。

1

//字串
2 router.push('home')34
//物件
5 router.push()67
//命名的路由
8 router.push(})910
//帶查詢引數，變成 /register?plan=private
11 router.push(})

注意：如果提供了path，params會被忽略，上述例子中的query並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的name或手寫完整的帶有引數的path：

1 const userid = 123

2 router.push(}) //
-> /user/123
3 router.push(` }) //
-> /user/1234//
這裡的 params 不生效
5 router.push(}) //
-> /user

同樣的規則也適用於router-link元件的to屬性

命名路由

有時候，通過乙個名稱來標識乙個路由顯得更方便一些，特別是在鏈結乙個路由，或者是執行一些跳轉的時候。你可以在建立 router 例項的時候，在routes配置中給某個路由設定名稱。

1 const router = new

vuerouter(8]
9 })

<

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

這跟**呼叫router.push()是一回事

router.push(})

預設(常規)方式：通過$route.params獲取

const user = }

'}const router = new
vuerouter(
]})

使用props解耦：只需要將props設定為true

const user =}

'}const router = new
vuerouter(]
})

Vue Router 學習筆記（基礎篇）

vue router提供來做 路由出口，渲染路徑匹配到的檢視元件。渲染的元件還可以內嵌自己的，根據巢狀路徑，渲染巢狀元件。路由檔案中 const router newvuerouter 有時候想同時 同級 展示多個檢視，而不是巢狀展示，例如建立乙個布局，有sidebar 側導航 和main 主內容 ...

vueRouter 路由基礎

一 重要概念 1 router是路由器 2 routes是一組路由 3 route某個路由 route.query route.params route.hash 後面的，包含 const router new vuerouter new vue 三 js方式跳轉傳參 使用name跳轉 this.r...

Vue Router基礎使用

作為vue生態系統裡面的一大成員，vue router主要負責vue中的頁面路由及其傳值問題。1 基本使用 新增路由 基本使用主要包括四個部分，頁面引入 配置路由陣列 例項化路由 把例項化的路由加入vue的例項化中。如下，元件引入，主要有以下三種方式 const index resolve requ...