vue1.0和vue2.0的区别之路由

    首先先说一下vue1.0在脚手架中如何声明和使用路由。首先先下载vue-router，在你的项目中用命令行中键入npm install vue-router@0.7.13，@后面的数字代表版本号。然后在你的项目中导入vue-router，导入完了之后用Vue.use()方法来使用路由，然后new一个路由对象，在map中配置路由，最后开启路由。下面用一个demo来详细的演示一下代码。这个demo是一个类似门户网站的导航栏，通过点击按钮来切换路由。

    在App.vue中，有两个路由映射，这两个映射分别跳到Home.vue和News.vue中：

<template>   <div id="app">      <h3>vue-loader+ vue-router</h3>      <div>         <a v-link="{path:'/home'}">主页</a>         <a v-link="{path:'/news'}">新闻</a>      </div>      <router-view></router-view>//路由的视图   </div></template><script>   </script><style>   body{      background: #ccc   }   .v-link-active{      font-size: 20px;      color: #f60;   }</style>

    

    与之对应的Home.vue和News.vue

<template>   <h3>我是主页</h3></template>

<template>   <h3>我是新闻</h3></template>

    然后在main.js中配置路由

import Vue from 'vue'import VueRouter from 'vue-router'  //引入一个路由组件import App from './App.vue'Vue.use(VueRouter);  //使用被引用的路由import Home from './components/Home.vue' //导入被映射的组件import News from './components/News.vue' //导入被映射的组件//配置路由，路由是常量，不能变更，所以用constconst router=new VueRouter();

//声明一些路由的规则router.map({   'home':{      component:Home   },   'news':{      component:News   }})

//默认打开的组件router.redirect({   '/':'/home'});router.start(App,'#app');  //打开路由

或者新建一个router.config.js文件，在该文件中这样配置路由：

//专门配置路由规则//引入模块import Home from './components/Home.vue'import News from './components/News.vue'export default{   '/home':{      component:Home   },   '/news':{      component:News   }}

然后在原来的main.js中这样调用：

import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'import routerConfig from './router.config.js'  //导入router.config.jsVue.use(VueRouter);//配置路由const router=new VueRouter();router.map(routerConfig);  //在这里导入配置文件router.redirect({   '/':'/home'});router.start(App,'#app');

最后运行。

在2.0中，路由的配置这有些不同，具体如下分析。首先下载一个路由，类似上面，只是不用加版本号，默认下载最新。类似的，首先App.vue中的v-link写法与上面不同。上面是在<a>标签中加入v-link这个属性，在2.0中则不需要<a>标签作为映射，直接通过<router-link to="路径">来作为映射，代码如下:

<template>  <div id="app">    <h3>vue2.0+webpack</h3>    <div>      <router-link to="/home">主页</router-link>      <router-link to="/news">新闻</router-link>    </div>    <div>      <router-view></router-view>    </div>  </div></template>

然后在main.js中配置路由的写法又是不同，首先在2.0中没有router.map这个写法，取而代之的是const routes=[json的东西]；并且没有router.redirect这个写法，想要默认路由的话要在const routes中加入{path:'*',redirect:'/home'}，还有一点就是，路由的开启也改了，变成这种写法：

const app=new Vue({  el: '#app',  router: router,  render: h=>h(App)})

最后给大家展示一下整个main.js代码：

import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'import Home from './components/Home.vue'import News from './components/News.vue'Vue.use(VueRouter);Vue.config.debug=true;const routes=[  {path: '/home', component: Home},  {path: '/news', component: News},  {path: '*', redirect: '/home'}];const router=new VueRouter({    routes})const app=new Vue({  el: '#app',  router: router,  render: h=>h(App)})

总结一下vue1.0和2.0之间路由的区别。

首先布局发生变化，1.0中可以在<a>并且中加入v-link这个属性来声明一个路由的映射，但是在2.0中这个方法完全不行，取而代之的是<router-view to="路径"></router-view>

然后路由的写法也发生变化。1.0中在router.map()里面写一个json，json的内容是关于路由的规则，如'router.map(home':{component’:Home})，而在2.0中写法变成const routes=[]，如const routes=[{path:'/home',component:Home}]，routes写好之后还要放到VueRouter的实例中声明。

其次是默认路由的写法也发生变化，1.0中直接通过router.redirect({'/':'/home'})，而2.0中是在刚刚的const routes里面加入{path:'*',redirect:'/home'}。

还有一点就是路由的开启也是不同的，1.0中是router.start(App,'#app')，2.0中是声明一个Vue实例，在实例中开启，如下所示：

const app=new Vue({  el: '#app',  router: router,  render: h=>h(App)})

除此之外，路由的嵌套也是不同，1.0中的写法是这样的，通过subRoutes来声明一个子路由：

'/home':{   component:Home,   subRoutes:{      'login':{         component:Login      },      'reg':{         component:Reg      }   }}

2.0的写法是这样的，在component后面加入children，children相当于上面的routes:

const routes=[  {path: '/home', component: Home},  {      path: '/news',      component: News,      children: [          {path:'login', component: Login}      ]  },  {path: '*', redirect: '/home'}];