详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

windows下vue-cli及webpack 构建网站(一)环境安装

 windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

windows下vue-cli及webpack 构建网站(三)使用组件 

1、本篇文章是建立在以上三篇文章的基础上的。

2、安装 vue-router 插件，运行cmd进入到项目目录下面，运行以下命令：

cnpm install vue-router --save-dev

3、在src文件夹下面新建一个文件夹page用于存放模板文件，然后分别在这个文件夹下面新建 index.vue、list.vue两个文件，然后打开index.vue粘贴以下代码：

<template>

<div class="jumbotron">
   <h1>这里是首页！</h1>
</div>

</template>

保存之后再打开list.vue粘贴以下代码：

<template>

<div class="list-group">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item active">
   这里是列表页
  </a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Morbi leo risus</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="list-group-item">Vestibulum at eros</a>
 </div>

</template>

来源：http://blog.csdn.net/ansu2009/article/details/53321044