學習完整課程請移步 互聯(lián)網(wǎng) Java 全棧工程師
本節(jié)視頻
概述
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成处坪，讓構建單頁面應用變得易如反掌先煎。包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的敛惊、基于組件的路由配置
- 路由參數(shù)、查詢擦耀、通配符
- 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
- 細粒度的導航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
- 自定義的滾動條行為
安裝
vue-router 是一個插件包，所以我們還是需要用 npm/cnpm 來進行安裝的铭乾。打開命令行工具，進入你的項目目錄娃循，輸入下面命令炕檩。
npm install vue-router --save-dev
如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
使用
以下案例在 vue-cli 項目中使用 vue-router
創(chuàng)建組件頁面
創(chuàng)建一個名為 src/components 的目錄專門放置我們開發(fā)的 Vue 組件捌斧，在 src/components 目錄下創(chuàng)建一個名為 Content.vue 的組件笛质，代碼如下：
<template>
<div>
我是內容頁
</div>
</template>
<script>
export default {
name: "Content"
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
安裝路由
創(chuàng)建一個名為 src/router 的目錄專門放置我們的路由配置代碼，在 src/router 目錄下創(chuàng)建一個名為 index.js 路由配置文件捞蚂，代碼如下：
import Vue from 'vue'
// 導入路由插件
import Router from 'vue-router'
// 導入上面定義的組件
import Content from '@/components/Content'
// 安裝路由
Vue.use(Router);
// 配置路由
export default new Router({
routes: [
{
// 路由路徑
path: '/content',
// 路由名稱
name: 'Content',
// 跳轉到組件
component: Content
}
]
});
配置路由
修改 main.js 入口文件妇押，增加配置路由的相關代碼
import Vue from 'vue'
import App from './App'
// 導入上面創(chuàng)建的路由配置目錄
import router from './router'
Vue.config.productionTip = false;
new Vue({
el: '#app',
// 配置路由
router,
components: { App },
template: '<App/>'
});
使用路由
修改 App.vue 組件，代碼如下：
<template>
<div id="app">
<router-link to="/">首頁</router-link>
<router-link to="/content">內容</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
說明：
-
router-link： 默認會被渲染成一個
<a>標簽洞难，to屬性為指定鏈接 - router-view： 用于渲染路由匹配到的組件
效果演示
