前提說明，在學習vue的時候，盡量的以官網的為主，而且框架本身與官方文檔都是在不斷叠代更新的。

在vue的框架中，目前都是使用vue-router 來進行頁面跳轉的，而不是<a>。先貼一個vue-router學習的官方文檔 https://router.vuejs.org/zh-cn/essentials/getting-started.html

事實上，使用vue-router 進行頁面跳轉一共有3種方式。這裏我就先用一個demo進行說明一下。

一、demo準備工作：自己先按照官網的說明 用webpack搭建 vue-cli 腳手架 網址：https://vuejs-templates.github.io/webpack/ 。搭建後運行 npm run dev ，在瀏覽器頁面成功出來就可以了。

踩坑說明：要及時升級版本！！！，這個版本包括，node版本，npm版本，vue版本，vue-cli版本，在全局安裝vue-cli時會自動默認安裝webpack的最新版本。

因為不同的版本會導致你安裝的vue-cli會有些細微的差異。這對於開發vue有經驗的人說影響不大，因為代碼原理一樣，目的一樣，使用方式不同而已。但是對於初學者會很致命，會繞很多彎路

先貼出demo源碼 鏈接：https://pan.baidu.com/s/1LIVX1G4EMN6joV1vDSTODg 密碼：boiw

然後，為了更好的說明問題，

在src/components裏面創建以下文件

src/router/router.js文件修改如下

 1 import Vue from ‘vue‘
 2 import Router from ‘vue-router‘
 3 import HelloWorld from ‘@/components/HelloWorld‘
 4 import home from ‘@/components/home‘
 5 import page01 from ‘@/components/page01‘
 6 import page02 from ‘@/components/page02‘
 7 
 8 import page01A from ‘@/components/page01/page01-A‘
 9 import page01B from ‘@/components/page01/page01-b‘
10
 
 import pageEnd from ‘@/components/page01/B/end‘
11 
12 Vue.use(Router)
13 
14 export default new Router({
15   routes: [
16     {
17       path: ‘/‘,
18       name: ‘home‘,
19       component: home
20     },
21     {
22       path: ‘/home‘,
23       name: ‘home‘,
24       component: home
25     },
26     {
27       path: ‘/page01‘,
28       name: ‘page01‘,
29       component: page01,
30       children: [
31         {
32           path: ‘page01-a‘,
33           name: ‘page01A‘,
34           component: page01A
35         },
36         {
37           path: ‘page01-b‘,
38           name: ‘page01B‘,
39           component: page01B,
40           children: [
41             {
42               path: ‘end‘,
43               name: ‘pageEnd‘,
44               component: pageEnd
45             }
46           ]
47         }
48       ]
49     },
50     {
51       path: ‘/page02‘,
52       name: ‘page02‘,
53       component: page02
54     }
55   ]
56 })

方法一、使用js編程的方式進行頁面跳轉。然後下面紅框是修改部分。

在src/main.js裏，給vue的原型鏈添加一個跳轉的函數，在往後需要跳轉的頁面，點擊後調用這個函數即可

方法二、通過router-link實現跳轉

像我這樣，直接渲染出來的是a標簽的。這種試用於不用做各種校驗直接跳轉的情況下使用

參考博文：https://www.cnblogs.com/wisewrong/p/6277262.html

　　　　https://www.jb51.net/article/127676.htm

vue學習 ---- 使用vue-router 進行跳轉