對於前端來說，其實瀏覽器配合超級連接就很好的實現了路由功能。但是對於單頁面應用來說，瀏覽器和超級連接的跳轉方式已經不能適用， 所以各大框架紛紛給出了單頁面應用的解決路由跳轉的方案。
Vue框架的兼容性非常好，可以很好的跟其他第三方的路由框架進行結合。當然官方也給出了路由的方案：
vue-router; 建議還是用官方的最好，使用量也是最大，相對來說Vue框架的升級路由組件升級也會及時跟上，所以為了以后的維護和升級方便還是使用Vue自家的東西最好。
7.1. Vue-router的版本對應
注意: vue-router@2.x 只適用於 Vue 2.x 版本。 vue-router@1.x 對應於Vue1.x版本。
- 的Github地址：vue-router
- 文檔地址
7.2. vue-router的安裝使用
- CDN連接方式
https://unpkg.com/vue-router/dist/vue-router.js
- npm 安裝
npm install vue-router
7.3. vue-router 入門demo
vue-router開發的步驟：
-
第一步： 引入vue和vue-router包。
可以使用cdn的方式或者npm的方式。如果配合npm和webpack的話可以直接作為一個模塊導入即可。但是作為初學入門的話建議還是 直接使用cdn包的形式，先學會怎么用路由。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
-
第二步： 定義路由跳轉的組件
// 1\. 定義（路由）組件。 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } -
第三步： 定義路由規則對象
// 每個路由path應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 創建路由對象
const router = new VueRouter({
routes // （縮寫）相當於 routes: routes，es6的新語法
})
- 第四步： 創建Vue對象，並加重上面創建的路由對象
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#app')
- 第五步： 在模板中編寫路由跳轉鏈接
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
最終的代碼：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
<script>
// 1\. 定義（路由）組件。
// 可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2\. 定義路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3\. 創建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這么簡單着吧。
const router = new VueRouter({
routes // （縮寫）相當於 routes: routes
})
// 4\. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#app')
</script>
7.4. 使用vue-router的綜合實例
下面是一個綜合的例子, 頁面上有幾個導航的按鈕，然后通過點擊不同的按鈕，可以在當前頁面切換不同的組件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之extend全局方法</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
ul, li { list-style: none; }
ul { overflow: hidden; }
li { float: left; width: 100px; }
h2 { background-color: #903;}
</style>
</head>
<body>
<div id="app">
<top-bar> </top-bar>
<hr>
<p>email to: {{ email }}</p>
<hr>
<router-view class="view one"></router-view>
<footer-bar></footer-bar>
</div>
<script>
var topbarTemp = `
<nav>
<ul>
<li v-for="item in NavList">
<router-link :to="item.url">{{ item.name }}</router-link>
</li>
</ul>
</nav>
`;
// 定義組件：topbar
Vue.component('top-bar', {
template: topbarTemp,
data: function () {
return {
NavList: [
{ name: '首頁', url: '/home'},
{ name: '產品', url: '/product'},
{ name: '服務', url: '/service'},
{ name: '關於', url: '/about'}
]
}
}
});
Vue.component('footer-bar', { // 定義組件 footerbar
template: `
<footer>
<hr/>
<p>版權所有@flydragon<p>
</footer>
`
});
// 創建home模塊
var home = {
template: `<div> <h2>{{ msg }}<h2></div>`,
data: function () {
return { msg: 'this is home view' }
}
};
// 創建product 模塊
var product = {
template: `<div> {{ msg }}</div>`,
data: function () {
return { msg: 'this is product view' }
}
}
// 定義路由對象
var router = new VueRouter({
routes: [
{ path: '/home', component: home },
{ path: '/product', component: product }
]
});
// 初始化一個Vue實例
var app = new Vue({
el: '#app',
data: {
email: 'flydragon@gmail.com'
},
router: router
});
</script>
</body>
</html>
7.5. 路由參數獲取
定義路由路徑的時候，可以指定參數。參數需要通過路徑進行標識：/user/:id就是定義了一個規則，/user開頭，然后后面的就是id參數的值。 比如：
路由規則： /user/:id
/user/9 => id = 9
/user/8 => id = 8
/user/1 => id = 1
然后在跳轉后的vue中可以通過this.$route.params.參數名獲取對應的參數。 比如代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之extend全局方法</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<nav>
<router-link to="/user/9">用戶</router-link>
<router-link to="/stu/malun">學生</router-link>
<hr>
</nav>
<router-view></router-view>
</div>
<script>
var user = {
template: `
<div>user id is : {{ $route.params.id }}</div>
`
};
var stu = {
template: `
<div>
<h2>{{ getName }}</h2>
</div>
`,
computed: {
getName: function () {
return this.$route.params.name;
}
}
};
var router = new VueRouter({
routes: [
{ path: '/user/:id', component: user },
{ path: '/stu/:name', component: stu }
]
});
var app = new Vue({
el: '#app',
router: router
});
</script>
</body>
</html>
7.6. js控制路由跳轉
上面我們演示的都是通過router-link進行跳轉。 其實我們還可以通過js編程的方式進行路由的跳轉。
// 當前路由的view跳轉到 /home
router.push('home')
// 對象, 跳轉到/home
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
7.7. 嵌套路由
嵌套路由跟普通路由基本沒有什么區別。但是可以讓vue開發變的非常靈活。 官網這塊寫的也非常好，我就直接拷貝了（原諒我吧。） 實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件，例如：
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
借助 vue-router，使用嵌套路由配置，就可以很簡單地表達這種關系。
<div id="app">
<router-view></router-view>
</div>
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
這里的 <router-view> 是最頂層的出口，渲染最高級路由匹配到的組件。同樣地，一個被渲染組件同樣可以包含自己的嵌套 <router-view>。例如，在 User 組件的模板添加一個 <router-view>：
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
要在嵌套的出口中渲染組件，需要在 VueRouter 的參數中使用 children 配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 當 /user/:id/profile 匹配成功，
// UserProfile 會被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 當 /user/:id/posts 匹配成功
// UserPosts 會被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
要注意，以 / 開頭的嵌套路徑會被當作根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。 你會發現，children 配置就是像 routes 配置一樣的路由配置數組，所以呢，你可以嵌套多層路由。
此時，基於上面的配置，當你訪問 /user/foo 時，User 的出口是不會渲染任何東西，這是因為沒有匹配到合適的子路由。如果你想要渲染點什么，可以提供一個 空的 子路由：
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 當 /user/:id 匹配成功，
// UserHome 會被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由
]
}
]
})
聯系老馬
對應視頻地址：https://chuanke.baidu.com/s5508922.html
老馬qq： 515154084
老馬微信：請掃碼
微信：Flydragon_malun 或者18911865673