首先我们用vue-cli搭建一个vue开发的脚手架，删除它的原来的代码，开始写自己的代码，实现最简单的router功能：
一，开始
新建几个自己需要的页面
，随便写点东西
<template> <div id = "movie"> I‘m moive! </div> </template> <script> export default {}; </script> <style> </style>
看入口文件main.js,可以看到
import router from ‘./router‘;
router从router这个文件夹引入，我们打开router这个文件夹下的index.js，在这里配置路由
import Vue from ‘vue‘; import Router from ‘vue-router‘; import post from ‘../components/post/post‘; import movie from ‘../components/movie/movie‘; import music from ‘../components/music/music‘; // 记住用之前要先注册 Vue.use(Router); export default new Router({ routes: [ { path: ‘/post‘, component: post }, { path: ‘/movie‘, component: movie }, { path: ‘/music‘, component: music } ] });
再来写我们的app.vue文件（to和path是一一对应的）
<template>
<div id="container">
<div class="header">
<div class="tab-item">
<router-link to="/post">日志</router-link>
</div>
<div class="tab-item">
<router-link to="/movie">电影</router-link>
</div>
<div class="tab-item">
<router-link to="/music">音乐</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>
记住我们的这个模板文件是挂载在id=app的div中的，所以在index.html中要有<div id="app"><app></app></div>,
然后保存，就可以看到：
二、动态路由匹配
修改router/index.js
Vue.use(Router); export default new Router({ routes: [ { path: ‘/user/:id‘, component: post } ] });
修改app.vue
<template>
<div id="container">
<div class="header">
<div class="tab-item">
<router-link to="/user/post">日志</router-link>
</div>
<div class="tab-item">
<router-link to="/user/movie">电影</router-link>
</div>
<div class="tab-item">
<router-link to="/user/music">音乐</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>
修改post.vue
<template>
<div id = "post">
I‘m {{ $route.params.id }}!
</div>
</template>
<script>
export default {};
</script>
看下效果：
虽然效果一样，但这其实是post一个模板的三次复用，至于$route.params.id，可以参考文档：http://router.vuejs.org/zh-cn/api/route-object.html
三、嵌套路由
首先先改写app.vue
<template>
<div id="container">
<div class="header">
<div class="tab-item">
<router-link to="/user">日志</router-link>
</div>
<router-view></router-view>
</div>
</div>
</template>
再改写post.vue
<template>
<div id = "post">
<router-link to="/user/music">音乐</router-link>
<router-link to="/user/movie">电影</router-link>
<router-view></router-view>
</div>
</template>
再把movie.vue和music.vue,改写成如下形式
<template> <div id = "movie"> I‘m Movie! </div> </template>
最后改router/index.js
Vue.use(Router); export default new Router({ routes: [ { path: ‘/user‘, component: post, children: [ { path: ‘/user/movie‘, component: movie }, { path: ‘/user/music‘, component: music } ] } ] });
看结果，这就实现了最简单的嵌套路由：
四、router.push()
其实你在点击router-link时执行的就是router.push()的方法，我们可以单独给它一个点击事件，同样可以实现跳转
post.vue
<template>
<div id = "post">
<router-link to="/user/foo/music">音乐</router-link>
<router-link to="/user/foo/movie">电影</router-link>
<div class = "button">
<button @click="goMusic">音乐</button>
<button @click="goMovie">电影</button>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
methods: {
goMusic(){
this.$router.push(‘/user/foo/music‘);
},
goMovie(){
this.$router.push(‘/user/foo/movie‘);
}
}
};
</script>
看结果和直接点击是一样的：
五、路由的命名和参数传递
路由的命名实际上就是给路由绑定一个那么的属性，通过name的值来跳转；而参数的传递则可以在页面进行绑定，下面做一个最简单的例子
先把app.vue修改：
<template> <div id="container"> <div class="header"> <div class="tab-item"> // 注意：，这里需要绑定 <router-link :to="{ name: ‘post‘ }">日志</router-link> </div> <div class="tab-item"> <router-link :to="{ name: ‘movie‘ }">电影</router-link> </div> <div class="tab-item"> //传递两个自定义参数 <router-link :to="{ name: ‘music‘, params: { id: 123, dataId:456} }">音乐</router-link> </div> </div> <router-view></router-view> </div> </template>
在修改接收参数的music.vue:
<template>
<div id="music">
I‘m Music!
// 可以直接接收
<span>传递参数id: {{$route.params.id }}</span>
<button @click="showData">调用参数</button>
<span>接收参数：{{dataId}}</span>
</div>
</template>
<script>
export default {
data() {
return {
dataId: ‘‘
}
},
methods: {
// 也可以在这里接收后，赋值
showData() {
let dataId = this.$route.params.dataId;
this.dataId = dataId;
}
}
};
</script>
最后看一下结果：
这样，我们就对vue-router进行了一个最简单的了解，以及最简单的应用
从零开始，零基础，一点一点探索vue-router(vue2.0)
原文：http://www.cnblogs.com/lastnigtic/p/6486693.html