什麼是 Vue Router？
Vue Router是Vue.js的官方路由管理器，可以控制Vue單頁應用的路由。
如何快速上手？
vue-cli腳手架自帶Vue-Router依賴
新版的vue-cli腳手架中，默認default模式沒有router依賴，請選擇Manually select features後添加Router依賴後，選擇History模式。![]()
在HTML進行路由設置
<el-dropdown-menu slot="dropdown">
<router-link to="/profile/index">
<el-dropdown-item>新建分類</el-dropdown-item>
</router-link>
</el-dropdown-menu>我們可以利用<router-link to="path">標籤來控制單頁應用的跳轉路徑
使用單文件組件內進行路由設置
<el-dropdown-menu slot="dropdown">
<el-menu-item @click="onCreate">新建分類</el-menu-item>
</el-dropdown-menu>
export default {
methods: {
onCreate() {
this.$router.push({
path: '/categories/create'
})
}
}
}我可以使用this.$router方法進行操作路由
執行了push或<router-link>跳轉操作還遠遠不夠，我們還在router.js上進行路由（目錄）添加你需要對應標準的地址以及地址包含component組件，不然編譯器不知道你要跳轉的實質內容是什麼~
router.js配置
// 按需加載你需要的依賴
import Vue from 'vue'
import Router from 'vue-router'
import Main from './views/main.vue'
import CategoryEdit from './components/categoryEdit.vue'
Vue.use(Router)
export default new Router({
mode: 'history', // history模式
base: process.env.BASE_URL, // 環境內部基礎地址
routes: [
{
path: '/', // 當地址在根目錄的時候，跳轉到Main的組件，這就是首頁
name: 'main',
component: Main,
children: [
{
path: '/categories/create',// 它是Main的子路由，默認在首頁 調用CategoryEdit組件
name: 'categoryCreate',
component: CategoryEdit
},
{
path: '/categories/create', // 它是Main的子路由， 當地址轉到/categories/create上，則調用CategoryEdit組件
name: 'categoryCreate',
component: CategoryEdit
}
]
}
]
})嵌套路由
剛剛在上面我們提高了「子路由」，然後我們開始瞭解下嵌套路由
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+這是官網的栗子，我們看來下更直觀。
我們要做的是改變這個網頁的子路由內容組件人，讓我們看下代碼吧~
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px"
style="background-color: rgb(238, 241, 246)">
<el-menu router
:default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title">分類</template>
<el-menu-item-group>
<el-menu-item @click="onCreate">新建分類</el-menu-item>
<el-menu-item>分類列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
</el-header>
<el-main>
<!--這裏是我們需要的子路由標籤-->
<router-view>
</router-view>
</el-main>
</el-container>
</el-container>
export default {
methods: {
onCreate() {
this.$router.push({
path: '/categories/create'
})
}
}
}當我們在進行執行 $this.router.push 或者 <router-link> 跳轉的時候，
我們可以看到，push的路徑是「/categories/create」，回到router.js代碼上,我們可以看到，/categories/create是在/根目錄下的children裏面，這就說明它是根目錄的子路由，子路由在子路由標籤<router-view>上進行渲染。
我們還可以利用<router-view>的name屬性進行跳轉制定的子路由容器
如圖上，父容器HTML中有3個route視圖：
- header
- side
- content
我們需要這三個都是動態的，都是需要根據需求加載不同的內容。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>那麼這個時候，我們需要在router.js中，加載配置三個組件
components爲複數。
import Header from './components/header.vue'
import Side from './components/side.vue'
import Content from './components/content.vue'
import CategoryEdit from './components/categoryEdit.vue'
import CategoryList from './components/categoryList.vue'
routes: [
{
path: '/',
name: 'main',
components: {
efault: Header,
a: Side,
b: Content
},
children: [
{
path: '/categories/create/:userid',
name: 'categoryCreate',
component: CategoryEdit
},
{
path: '/',
name: 'categoryList',
component: CategoryList
}
]
}
]動態路由分配（如何給函數添加參數以及如何保證跳轉的唯一性）
在絕大分部情況下，我們需要利用同一個組件加載不同的數據內容（比如詳情、用戶表信息等等），那我們怎麼保證跳轉的唯一性呢?
這時候，我們需要利用路由命名方法
1.router.js 配置對應路徑以及名字
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'main',
component: Main,
children: [
{
path: '/categories/create/:userid', // 這是userid就是參數名
name: 'categoryCreate',
component: CategoryEdit
},
{
path: '/',
name: 'categoryList',
component: CategoryList
}
]
}
]
})2.路由容器，執行跳轉操作
onCreate() {
this.$router.push({
name: 'categoryCreate',
params: { userid: 123 }
})
}3.點擊跳轉，則地址變成
http://localhost:8080/categories/create/1234.在子路由容器中獲取到參數名字和內容
mounted() {
// 注意是this.$route，是路由對象
console.log('你獲取的參數是：' + this.$route.params);
},打印出來的數據
{
userid: "123"
}關於命名路由，還有其他的寫法
// HTML上
<router-link :to="{ name: 'categoryCreate', params: { userId: 123 }}">User</router-link>
// .vue組件的其他寫法
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這裏的 params 不生效，必須使用上面的寫法
router.push({ path: '/user', params: { userId }}) // -> /userGET請求-路由組件傳參數
這個和一般的url上拼接參數，獲取一樣，只不過router提供一個設置和獲取方法。
http://localhost:8080/categories/create/123?dataval=admin傳遞參數
this.$router.push({
name: 'categoryCreate?ad=11',
params: {
userid: 123
},
query: {
dataval: 'admin'
}
})不需要在router.js中進行配置
獲取參數
let val = this.$route.query.dataval; // admin其他的寫法
<!-- 帶查詢參數，下面的結果爲 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
<!--拼到path中-->
this.$router.push({path: `/categories/create/${userid}?admin=tre`});