在使用vue脚手架之前你必须掌握的:vue的模版以及路由用法

有的同学在学习中陷入了迷茫，在不清楚知识体系的情况下乱学一通，最后导致了基础会一点，后面的知识大概了解

就是没法彻底掌握，所以在这里希望大家如果有陷入vue迷茫的小伙伴不要过早的使用vue脚手架

先把vue中核心的地方弄懂

在阅读此文章之前保证你学会了作者之前发布的文章内容，

或者你自己了解其他方式实现的以下内容：

1.webpack项目搭建技巧

2.常用的webpack的各种loader以及es5，6的基础语法

3.什么是热更新

4.webpack自带服务器活着webpack的node API

5.vue的基本引入以及常用组件知识

今天我们直接跳过页面声明模版的写法来学习外部vue文件的引用方式

首先需要在你的项目中引入vue的依赖包以及vue-loader 还有 vue-router

package.json如图，其他组件不同也没事

下面我们来看一下主文件结构

我们本次使用的是test2系列

首先我们先来演示以下如何在主文件內引用外部的vue文件

首先在tpl中创建tem1.vue

如图（vue文件如何书写作为前置条件，不会的童鞋可以自己查阅官方文档）

这是我们准备好的一个简单vue模块

下面演示如何加载到test2.html

需要在test2.js中使用Vue对象将模版文件渲染到页面中

好了，我们在网页內引入模版就只需要这么几步的操作，

那么vuejs是单页应用的一个框架，所以我们在同一个文件中可能会引入大量的模版文件

这样就意味着我们在网页內实现的超链接跳页也需要在单页中进行切换

vue提供了一个路由功能，

通过中间件vue-router就可以实现快速的切换模版文件就向在网页中进行跳页的效果一样

我们做一个简单的例子

在这之前我们需要创建第二个vue模版tem2

步骤可以重复上面的操作这里省略步骤

此时我们只需要在test2.js中和test2.html中做如下修改即可实现路由功能

好了下面可以看界面结果了

两个呈现超链接状态的文字可以随时切换下面的显示内容

到这里引用vue以及路由的简单使用我们应该大概有个印象了，

那么如果我想往虚拟的页面中传入参数应该怎么办呢

我们可以在router-link 中做如下修改，并且在对应的页面做接值操作就可以了

最后我们做一下测试吧

这是默认状态

当我们点击app1时出现的效果

怎么样，相比繁琐的界面处理，vue.js让你的代码变得更加整洁并且有调理了吧

我们做到了将所有的界面部分都拆分成了各个模块并且单独做管理，模块间还可以通过框架获得通信，

这样我们可以让一个很大很散乱的项目编程一个可维护性极强的单页应用，

为什么单页应用在现在这个时代如此受欢迎是因为它确实有他的好处，

而且vue.js在这方面吸取了react.js以及angular.js的优点，虽然它看起来没有前两者的名头大，但是它凭借自身的优势，

以及较低的学习成本和更加人性化的api取得了大量开发者的青睐

如此时代，如果你还只掌握jQuery等基础代码库，那么就永远都无法跟上前端学习的脚步了，

so

如果想领略vue的更多风采，把基础补全，之后去安装vue脚手架吧