vue.js之路(3)——vue2版本的路由

 在使用vue编写单页应用时，通过点击不同的连接想要局部刷新出不同页面的内容，通过vue-router会非常方便。

       然而在vue2和vue1中，路由的使用有着非常多不同的地方，当我们用npm搭建的是vue2版本的脚手架时，vue-router2.0以后的版本是不再兼容之前的写法的，这个我也踩了很多坑，各种百度和看文档，然后把原本Vue Router1版本的写法改了过来。这里来对比一下前后写法的不同：

在一切开始之前，首先要使用npm install vue-router --save 安装vue的路由依赖，接下来才算是正式开始：

1.标签部分：

vue1中是通过给<a>标签添加v-link属性，来给予其触发路由的功能的，写法如下：

  <div id="app">
    <div class="tab">
      <div class="tab-item"><a v-link="{path:'/home'}">主页</a></div>
      <div class="tab-item"><a v-link="{path:'/detail'}">详情</a></div>
      <div class="tab-item"><a v-link="{path:'/about'}">关于</a></div>
    </div>
    <router-view></router-view>
  </div>

这里的<router-view>标签内，就是不同url下内容的显示区域。这个标签在vue1和vue2中作用是一样的。

      在vue2中，将原本的<a v-link="">替换成了新的自定义标签<router-link>，通过to属性，指定路径：

<div id="app">
    <div class="tab border-1px">
      <div class="tab-item"><router-link to="/home">主页</router-link></div>
      <div class="tab-item"><router-link to="/detail">详情</router-link></div>
      <div class="tab-item"><router-link to="/about">关于</router-link></div>
    </div>
    <router-view></router-view>
  </div>

2.JS部分：

接下里是关于入口文件main.js中的代码编写：

      首先做一些必要的引入，这个在vue1和vue2中都是一样的：

import Vue from 'vue';   // 引入node_modules中的vue
import App from './App'; // 引入当前目录下的App.vue  后缀省略
import VueRouter from 'vue-router'; // 引入vue路由组件
import VueSource from 'vue-resource'; // 引入组件，vue-source 有类似ajax的数据交互功能
import goods from './components/home/home.vue'; // 引用组件，为了在配置路由时使用
import ratings from './components/detail/detail.vue';
import seller from './components/about/about.vue';
Vue.use(VueRouter); // 使用引入的路由组件


在vue1中，是通过router对象的map()方法，来定义路由的各个路径参数，并通过start()方法启动路由：

router.map({
    '/home': { component: home },
    '/detail': { component: detail }，
    '/about': { component: about}
})
var App = Vue.extend({});
router.start(App, '#app');
router.go('/home');//让项目启动时默认显示home的内容

然而在vue2中，map()和start()方法都已经无法使用了，且go()方法已经做了修改，使用push()方法代替如今的写法迁移过来大致如下：

const routes = [
  {path: '/home', component: home},
  {path: '/detail', component: detail},
  {path: '/about', component: about},
  {path: '/', component: home}   //这里是为了让输入错误路径和空路径时默认显示home的内容
];
let router = new VueRouter({    
  routes,                           // routes:routes  传入路由参数
  linkActiveClass: 'active'    // 这个属性是设置当前被点击的a标签class名，为了方便设置选中项的样式
}); // 声明一个路由对象

/* eslint-disable no-new */
// new 一个vue的实例
let vue = new Vue({
  el: '#app', // 挂载点，挂载在id为app的组件上
  template: '<App/>',
  router,        //把声明的router对象作为参数传给vue对象
  components: { App } // 组册组件，这里是一个es6的缩写方法，相当于components:{App:App}
});
vue.$mount('#app'); // 把vue挂载到dom上
router.push('/goods');// 代替原本的router.go()，让页面初始默认跳转到/goods




vue1到vue2的迁移似乎真的是大工程，需要修改的地方还是非常多的，日后会边学习，边补充~