vue流程和路由跳转

本文适于vue.js的新手刚入门的那种o(∩_∩)o ，主要介绍了vue的运行过程、vue组件路由的跳转。

前言 项目部署：
首先用webstrom2018创建一个vue.js项目后（需事先在本机windows环境下装好npm和node.js，否则使用webstorm2018创建和运行vue项目都会出现失败效果），会给您一个完整的工程，如：
然后，我们先部署默认项目运行看一下初始效果，部署项目过程如下：


点击绿色的按钮直接运行即可，控制台出现Your application is running here: http://localhost:8080就代表成功且控制台内没出现ERROR则代表成功，进入这个http://localhost:8080即可看到初始效果，如：

下面进入正题1：vue的运行过程

打开项目，我们会看到一个main.js，这就是vue项目的启动入口类，进入main.js可以看到
其中引用了一些基本的vue组件。
第一句引用默认的vue文件。
第二句引用了我们外面有的一个App.vue组件(很重要)，进入这个组件可以看到，其中template是一个模版，里面只能放一个div，div里面又放了一个img（就是我们进入项目初始界面时看到的logo），相当于一个容器，用来渲染通过路由映射过来的组件。
第三句import router from './router’这句话的意思，可以点击./router进入这个页面，这个页面其实就是router文件夹下面的index.js，
这个就是配置路由跳转的配置类，比如默认看到的/ HelloWorld 就是导入项目的HelloWorld组件后，当项目路径输入http://localhost:8080/之后就会通过路由跳转到这个HelloWolrd.vue组件中去，当然，可以自己添加多个。
这三句话讲完之后，再看到下面的
e1:就是默认的index.html初始页div的id内容 如下，
router,调用上面的./router（router文件夹下面的index.js）启动路由跳转.
components调用上面导入的App.vue组件，App.vue组件的内容。 事先讲过，里面有个logo图片和 渲染路由映射过来的组件.
template:这样写就是代表APP这个组件 template: ''就是代表使用APP组件的模板.
总结，用户输入localhost:8080，进入main.js，会进入Index.html首页，首先实例化下面的vue对象，将App.vue组件的内容封装成一个div提取出来，内容默认是一张logo和路由渲染容器，此时又会被router路由拦截器拦截到，发现项目url是/ 则会进入HelloWord.vue组件中，将helloWord.vue组件的div的内容提取出来拼接到App.vue的div的内容中，最后将内容渲染到首页的#app的div中，完成首页效果的渲染。
比如：您可以将App.vue中的图片删掉，然后再加载项目时初始页面就不会显示图片了。

下面进入正题2：vue组件路由的跳转

前言： 如果您已经将vue的运行流程了解大概了的话，路由跳转原理将会很简单，
首先components文件夹下面创建一个demo1.vue文件，在div里面写一句话this is demo1.vue 如：
然后在router文件夹下面的index.js（路由跳转配置文件）中配置demo1的路由跳转映射 如：
，然后再HelloWord.vue（也就是项目默认加载时/ 映射的Helloword组件）中，写一个有序列表ol，写三个li标签分别放demo1 demo2 demo3，然后只给demo1加上router-link标签实现路由跳转（这里演示未加参数，项目中可根据情况传递参数），点击demo1时发生路由跳转，跳转到demo.vue组件中 如：
，OK，运行项目，可以看到，
当我们点击demo1时，理所应当会跳到demo1.vue组件中，显示那句话…忘了…
，点击后成功显示！
…第一次写博客，有什么不足请指出，本人会虚心接受! 谢谢!