VUE专题（二）vue2.0路由搭建

vue

从不太了解vue到今天独自扛起一个vue项目，真的是越战越勇，慢慢的喜欢上了这个前端框架，当然所经历的心里折磨也是不少的，所有踩过的坑都使我每一步更加稳健。
我不知道大家会不会经历我所经历过得 ，但是我还是想要分享，最近几篇是这样规划的，我先把大体框架给整出来，然后我再总结一下自己所经历的一些坑。

//index.html

 
 
 
  content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
 
 
 
 
 
 

 
 
 
 

这是一个index.html文件，挂载点是

。
我在下边引用了bundle.js是我用webpack打包编译后的js文件。
//App.vue

是路由
是路由切换的页面
//main.js

 // The Vue build version to load with the import command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import VueResource from 'vue-resource';
 import App from './App.vue';
 import home from './client/home/home.vue';
 import device from './client/device/device.vue';
 
 
Vue.use(VueRouter);
 Vue.use(VueResource);
 
 
const routes = [
 {
 path: '/home',
 component: home
 },
 {
 path: '/device',
 component: device
 },
 {
 path: '/',
 component: home
 }
 ];
 
 
const router = new VueRouter({
 routes
 });
 
 
new Vue({
 router,
 render: h=>h(App)
 }).$mount('#app');
 

main.js这是入口文件，首先我先导入这些依赖，这些依赖都是我自己在package.json中定义安装好的，我用的时候只需要import 就行了，
vue是vue.js文件，
vue-router是vue提供的路由，我们今天就用它就好，
vue-resource是vue提供的与后台交互的，
App.vue ,home.vue, device.vue 只要是以.vue结尾的都是组件模板
在vue中我们要使用路由还要进行注册 即Vue.use();
接下来我们配置下路由规则：
path：跟你在首页中的名字是一样的
component：是你要跳转的组件的名字
创建一个路由器实例 router
路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
好啦 ，今天就到这把 ，有点困辣，早睡早起
今天有个读者说群二维码过期辣，我每次更新文章的时候都会附上二维码，欢迎大家来群里交流学习。

webwxgetmsgimg.jpg