官方文檔：
舊版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
新版：http://router.vuejs.org/（2.0版本）
此文是舊版
文件結構圖：
基本用法：
<router-view>是一個頂級的路由外鏈，用于渲染匹配的組件。
例如：我的應用入口是app.vue
那么在app.vue中添加如下代碼， 此處涉及ES6。
app.vue
<template> <div class='page index-content'> <router-view class="view" keep-alive transition="slide"></router-view> <Footers></Footers> </div></template><script>/**ES6模塊系統特性:1.使用export關鍵詞導出對象。這個關鍵字可以無限次使用；2.使用import關鍵字將其它模塊導入某一模塊中。它可用來導入任意數量的模塊；3.支持模塊的異步加載；4.為加載模塊提供編程支持。*///導入footer組件import Footers from '../components/footer'//導入路由import Router from 'vue-router'//default導出，使用關鍵字default，可將對象標注為default對象導出。default關鍵字在每一個模塊中只能使用一次。它既可以用于內聯導出，也可以用于一組對象導出聲明中。export default{ components:{ Footers }}</script>Footer是一個公用的頁腳組件，存放于components文件夾中
footer.vue
<template> <div class='footer'> <a v-link="{path:'/home'}"> <span v-if="$route.name == 'home'" class='active'>首頁</span> <span v-else>首頁</span> </a> <a v-link="{path:'/list'}"> <span v-if="$route.name == 'list'" class='active'>跳轉1</span> <span v-else>跳轉1</span> </a> <a v-link="{path:'/account'}"> <!-- 根據路由名稱判斷選中的項 --> <span v-if="$route.name == 'account'" class='active'>跳轉2</span><!-- 滿足條件 --> <span v-else>跳轉2</span><!--不滿足--> </a> </div></template><style> .footer{ background: #fff; border-top: 1px solid #dedede; display: table; } .footer a{ display: table-cell; text-align: center; text-decoration: none; color: #666 } .active{ color:red !important; }</style>由于app.vue是最頂級的入口文件，在app.vue中引用footer組件的話，所有頁面都會包含footer內容，但是二級頁面等子頁面不需要，所以得把app.vue中代碼復制到index.vue中，把app.vue中footer相關的部分刪掉。
在index.html中添加如下代碼，創建一個路由實例。
<app></app>
在main.js中配置route.map
main.js
import Vue from 'vue'import VueRouter from 'vue-router'//導入vue-router//導入組件import App from './App'import Index from './page/index'import list from './page/list'import Home from './page/home'import Account from './page/account'Vue.use(VueRouter)var router = new VueRouter()router.map({ //默認指向index '/':{ name:'index', component:Index, //子路由(有頁底) subRoutes:{ '/home':{ name:'home', component:Home }, '/account':{ name:'account', component:Account } } }, //沒有footer '/list':{ name:'list', component:list }})//啟動一個啟用了路由的應用router.start(App,'app')router.start中的'app'，指的是index中的：<app></app>，可以取其他的名字，但是得和index中的名字一致。
這時啟動項目（npm run dev）會發現，頁面上只有footer，而沒有顯示其他內容。因為index.vue本來就只有footer而沒有其他內容，但是我們肯定要顯示頁面，就要用到
router.redirect(redirectMap)重定向
例如：我們要默認載入home頁面
在main.js中加入
//重定向到homerouter.redirect({ '*':'home'})router.start(App,'app')在index中加入init()函數
<script>export default{ components:{ Footers }, init(){ var router = new Router() router.go('/home');//跳轉到home組件 }}</script>然而，經過測試，redirect并沒有重定向的home，載入home的真正原因是：router.go('/home')
此時，進入項目就會顯示home頁面的內容了。
路由規則和路由匹配
Vue-router 做路徑匹配時支持動態片段、全匹配片段以及查詢參數（片段指的是 URL 中的一部分）。對于解析過的路由，這些信息都可以通過路由上下文對象（從現在起，我們會稱其為路由對象）訪問。 在使用了 vue-router 的應用中，路由對象會被注入每個組件中，賦值為 this.$route ，并且當路由切換時，路由對象會被更新。
$route.path
字符串，等于當前路由對象的路徑，會被解析為絕對路徑，例如：/list，來源于route.map中配置的路徑
router.map({ '/home':{ name:'list', component:Home } })dom中
<a v-link="{path:'/list'}">前往list列表頁面</a>或者（具名路徑）
<a v-link="{name:'list'}">前往list列表頁面</a>帶參數跳轉（例如：從列表頁跳轉到列表詳情頁）
<ul> <li v-for="item in alllist"> <!--點擊跳轉到詳情--> <a v-link="{ name: 'listDetail',params:{id: item.id }}"> {{item.title}}<!--標題 --> </a> </li></ul>script。
<script>export default{ data(){ return{ alllist:[] } }, route:{ data({to}){ return Promise.all([ //獲取數據 this.$http.get('http://192.168.0.1/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1}) ]).then(function(data){ return{ //將獲取到的數據復制給allllist數組 alllist:data[0].data.knowledgeList } },function(error){ //error }) } }}</script>詳情頁代碼
<div class='article-box' v-if="!$loadingRouteData"> <p class='font-bigger'>{{listDetail.title}}</p> <p class='co9a9a9a article-time'><span>閱讀：{{listDetail.viewTimes}}</span><span>發布時間: {{listDetail.publishTime | timer}}</span></p> <div class='content-img'> {{{listDetail.content}}}<!--讀取富文本信息--> </div></div><script>export default{ data() { return{ listDetail:[], routeid:'' //若不是走路由，采用另一種方式獲取 //routeid:this.$route.query.id } }, route:{ //id:來源于a標簽的參數 data ({to:{params:{ id}}}) { var that = this ; that.$set('routeid',id)//獲取id return Promise.all([ that.$http.get('http://192.168.0.1/rest/knowledge',{'id':id}), ]).then(function(data){ console.log(data) return{ listDetail:data[0].data.knowledge, } }) } }, methods:{ collect(){ } }, ready(){ var that = this; console.log(that.$get('routeid')) //得到傳進來的id }}</script>此時router要做下修改
'/list':{ name:'list', component:GetReceipt},'/listDetail/:id':{ name:'listDetail', component:GetReceiptDetail}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
