路由配置

安装完 Node.js 和 npm/cnpm 后。通过命令控制面板：

1，创建 webpack 模板的新项目：vue init webpack my-project

2，进入项目：cd my-project

3，安装依赖包：cnpm install + 回车 (淘宝镜像使用) / npm install (下载国外的npm才使用)

4，运行项目：npm run dev

5，知道 localhost:8080可以访问，再进行以下配置。

首先必须在url/pages/demo2/index.vue  创建 index.vue,如下index.vue代码：

<template>
	<h3>我爱你</h3>
</template>
<script>
	export default{
		data(){
			return{

			}
		},
		beforeCreate(){
			console.log("beforeCreate");
		},
		created(){
			console.log('created');
		},
		beforeMount(){
			console.log('beforeMount');
		},
		mounted(){
			console.log('mounted');
		},
		beforeDestory(){
			console.log('beforeDestory');
		},
		destoryed(){
			console.log('destoryed');
		}
	}
</script>

　　

router文件夹下面的index.js，即路由的配置：

import Vue from 'vue'
import Router from 'vue-router'
// @代表src目录
import HelloWorld from '@/components/HelloWorld'
//这是第二种导入方式，所有版本都支持。
import Demo1 from '@/pages/demo1/index.vue'
//如果页面的名称是index.vue，那么可以直接省略该页面。
//如：import Demo2 from '@/pages/demo2'  前提是必须先创建一个index.vue文件才行
import Demo2 from '@/pages/demo2/index.vue'

Vue.use(Router)

export default new Router({
  routes: [
  //下面每一个{}都是在配置一个路由。
    {
      /**
       * 斜杆表示一个页面，就是component:HelloWorld
       * 斜杆 表示根目录，如果斜杆后面没有输入其他东西，默认就是进入默认页面。
       */
      path: '/',
      name: 'HelloWorld',  /*页面的名称*/
      /*component 组件 成分 组成部分  英 /kəmˈpəʊnənt/
       *component:HelloWorld，并不是说HelloWorld文件在components目录下。
       *这里仅仅表达的是：HelloWorld是一个组成部分。
       *这里的文件是有上面 inport 进行导入的：import HelloWorld from '@/components/HelloWorld'
       * @ 表示 src 目录 即：'src/components/HelloWorld'
       */
      component: HelloWorld
    },
    /*
     {
      path:'/demo1',
      name:'demo1',
      // 第一种引入路劲，有一些版本不支持该方式，所以不推荐使用。如下：
      component:require("@pages/demo1/index.vue")
    }*/
     {
      path:'/demo1',//地址栏根目录后面，即斜杆后面输入该内容就会跳跳转到绑定的页面。
      name:'index',//这只是一个别名，暂时用不到。
      component:Demo1 //这里的绑定的Demo1是指：上面import进行导入指定路径的页面。
    },
     {
      path:'/demo2',//地址栏根目录后面，即斜杆后面输入该内容就会跳跳转到绑定的页面。
      name:'index',//这只是一个别名，暂时用不到。
      component:Demo2 //这里的绑定的Demo1是指：上面import进行导入指定路径的页面。
    }
  ]
})

　　

其他注意点：

<template>
  <div id="app">
    <!-- 运行时，页面会出现一个 V 形图标，就是在这里给添加的，所以，删除即可。 -->
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>