Vue踩坑之Vue-router

照着教程学习Vue，由于教程使用的是Vue1，但是我用npm安装的是2.0版本，所以开始了踩坑之旅

关于Vue-router2

我直接用npm安装的模板是这样的

这里是直接有个router文件夹的，路由的信息都在这里面的index.js文件里面

这是原来的路由配置

import Vue from 'vue';
import Router from 'vue-router';
import Hello from 'components/Hello';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default: Hello
      }
    }
  ]
});

可以看出path: '/'就是根目录下的组件，默认是Hello，如果我们想在页面中再引入一个组件，就可以直接在这个path目录下写，比如我们再加个header组件

import Vue from 'vue';
import Router from 'vue-router';
import Hello from 'components/Hello';
// 导入组件
import Header from 'components/header/header';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default: Hello,
        // 注册组件，命名为Header
        Header: Header
      }
    }
  ]
});

然后在App.vue文件内写入就好了

<router-view name="Header"></router-view>

不同的组件以name区分，所以要记得带上name,默认的就可以省略。

不同地址的组件

比如我们要实现点击跳转到该组件

仍然在router文件夹里的index.js文件内，继续配置router信息就可以了

import Vue from 'vue';
import Router from 'vue-router';
import Hello from 'components/Hello';
import Header from 'components/header/header';
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default: Hello,
        Header: Header
      }
    },
    {
      // 地址
      path: '/goods',
      components: {
        default: goods
      }
    },
    {
      path: '/ratings',
      components: {
        default: ratings
      }
    },
    {
      path: '/seller',
      components: {
        default: seller
      }
    }
  ]
});

然后在App.vue里使用

// 这里相当于一个a标签
<router-link to="/goods">商品</router-link>

// 然后在相应的区域里显示
<router-view></router-view>

以上代码均可以在我的Github找到。