前言

该文针对的是Vue 1.0 版本写的教程，如果想学习Vue 2.0的相关教程，可查看另外两篇文章

vue-cli和vue-router都是Vue官方提供的库。一个是脚手架，一个是路由。这两天刚学习Vue.js，一开始对于如何在vue-cli创建的项目中使用vue-router有点搞不明白，总结下来，希望也能帮助到其他Vue初学者。

vue-cli

首先利用vue-cli创建项目。具体教程可以前往官网：https://github.com/vuejs/vue-cli。

我这里选择的是webpack模板。

vue-router

安装vue-router

1
2

npm install vue-router --save-dev

现在的/src/main.js长这样，

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import Vue from 'vue';
import App from './App';

/* eslint-disable no-new */
new Vue({
    el: '#app',
    components:{
        Vue,
        App

    }

})

项目中的components文件夹下已经有了Hello.vue组件了，我们再创建一个superman.vue。这样在项目中就拥有了两个component。并在App.vue中将我们新建的component引入进来。引入之后的App.vue如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<template>
 <div>
   <router-view></router-view>
 </div>
</template>

<script>
 import Hello from './components/Hello';
 import Superman from './components/superman';
 import cHeader from './components/Header.vue';

 export default {
   components: {
     Hello,
     Superman,
     cHeader,
   },
 };
</script>

<style>
 html {
   height: 100%;
 }

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }

 #app {
   color: #2c3e50;
   margin-top: -100px;
   max-width: 600px;
   font-family: Source Sans Pro, Helvetica, sans-serif;
   text-align: center;
 }

 #app a {
   color: #42b983;
   text-decoration: none;
 }

 .logo {
   width: 100px;
   height: 100px
 }
</style>

Vue-router配置

回到刚才的/src/main.js中，开始来配置Vue-router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import Vue from 'vue';
import VueRouter from 'vue-router';    //import here
import App from './App';

Vue.use(VueRouter);    // and here

/* eslint-disable no-new */
new Vue({

    el: '#app',

    components:{
        Vue,
        App
    }

})

到这一步，我们只是将Vue-router引入并且在Vue中注册。接下来我们就要开始写路由了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Vue.use(VueRouter);

const router = new VueRouter();

router.map({
 '/index': {
   component: App.components.Hello,    // 这里的component是在App.vue中引入的
 },

 '/about': {
   component: App.components.Superman,
 },
});

接着我们将App.vue中template部分删除，换成下面的代码

1
2
3
4
5

<template>
 <div>
   <router-view></router-view>
 </div>

写好router-view，接下来我们就可以启动路由了。将原有的Vue构造器去除，换成router.start();

1
2
3
4
5
6
7
8
9
10
11
12

router.map({
 '/index': {
   component: App.components.Hello,
 },

 '/about': {
   component: App.components.Superman,
 },
});

router.start(App, '#app');    //start app

最后一步就是添加id=app到根目录下的index.html:

1
2
3
4
5
6
7

<body>
<div id="app">
 <app></app>
</div>
<!-- built files will be auto injected -->
</body>

现在我们就可以愉快地使用vue-router了。

完整的/src/main.js如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';

/* eslint-disable no-new */

Vue.use(VueRouter);
const router = new VueRouter();

router.map({
 '/index': {
   component: App.components.Hello,
 },

 '/about': {
   component: App.components.Superman,
 },
});

router.start(App, '#app');

更多关于Vue-route的用法可以前往官方网站：http://router.vuejs.org/zh-cn/basic.html