vue学习 ---- 使用vue-router 进行跳转

前提说明，在学习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文件修改如下

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
 import home from '@/components/home'
 import page01 from '@/components/page01'
 import page02 from '@/components/page02'

 import page01A from '@/components/page01/page01-A'
 import page01B from '@/components/page01/page01-b'
 import pageEnd from '@/components/page01/B/end'

 Vue.use(Router)

 export default new Router({
   routes: [
     {
       path: '/',
       name: 'home',
       component: home
     },
     {
       path: '/home',
       name: 'home',
       component: home
     },
     {
       path: '/page01',
       name: 'page01',
       component: page01,
       children: [
         {
           path: 'page01-a',
           name: 'page01A',
           component: page01A
         },
         {
           path: 'page01-b',
           name: 'page01B',
           component: page01B,
           children: [
             {
               path: 'end',
               name: 'pageEnd',
               component: pageEnd
             }
           ]
         }
       ]
     },
     {
       path: '/page02',
       name: 'page02',
       component: page02
     }
   ]
 })

方法一、使用js编程的方式进行页面跳转。然后下面红框是修改部分。

在src/main.js里，给vue的原型链添加一个跳转的函数，在往后需要跳转的页面，点击后调用这个函数即可

方法二、通过router-link实现跳转

像我这样，直接渲染出来的是a标签的。这种试用于不用做各种校验直接跳转的情况下使用

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

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