概述：
vue-router是Vue.js官方的路由插件，比较适合用于构建单页面应用….(此处就省略了，直接主题)。本教程主要针对对api还比较不熟的同学，所以demo都是简单（js + html混写的）。目标：通过本教程，可以使用vue-router进行最基本的日常开发。
全部案例都放在：https://github.com/gu091120/vueRouterDemo.git
有兴趣的朋友可以下载下来看一下，如果觉得对你还是有帮助的，请 start 一下谢谢！！
安装：
1.直接下载：https://unpkg.com/vue-router；（本教程使用的）注意：本次教程用的vue和vue-router都是2.0版本
2.npm(安装)：npm install vue-router；
3.gitHub(下载): git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
首页先简单介绍使用四个基本步骤：
1.定义组件
2.定义路由
3.创建router实例并将定义好的路由传入
4.创建和挂载根实例（vue和vue-router）
第一个应用：
首页包的引入
<script src="js/vue.js"></script> <script src="js/vue-router.js"></script>
HTML:
<div id="app">
<h1>Hello World!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">Go to home</router-link>
<router-link to="/news">Go to news</router-link>
<router-link to="/about">Go to about</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
开始正题：
1.定义vue组建
// ‘const’ 是ES6的新的声明，如果不熟悉可以使用‘var’
const home = { template: '<div>this is home page</div>' }
const news = { template: '<div>this is news page</div>' }
const about = { template: '<div>this is about page</div>' }
2.定义路由
const routes = [
{ path: '/', component: home},
{ path: '/news', component: news},
{ path: '/about', component: about},
]
3.创建router实例，并将定义的路由传入
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
4.创建和挂载根实例
const app = new Vue({
router
}).$mount('#app')
好了，我们的第一个应用出来了。
接下来，我将开发中可能遇到问题，进行解决：
问题1：作为导航，当我们选择某个时，需要添加选中的状态。
当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active。所以我们只需要在class中添加.router-link-active 的css样式即可，比如：
.router-link-active{
color: red;
font-weight: 600;
}
动手去试的同学可能会发现这么一个现象：
明明我只选择了Go to news 但是Go to home 缺也是被选择的。这里的原因就是：<router-link>在和路由匹配的时候，并不是完整匹配，而是只要匹配到了就会添加 .router-link-active 这个class。而在我们定义路由的时候，定义了 “/” ，自然后面在选择 “/home ”和 “/news ” 时 home(“/”)自然就是一直被选中的状态，要解决这个问题其实很简单，只要在<router-link>中添加 “ exact ” ，即可坐到完全匹配。
<div id="app"> <h1>Hello World!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/" exact >Go to home</router-link> <router-link to="/news">Go to news</router-link> <router-link to="/about">Go to about</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div>
这样问题变回解决了。到这里细心的同学，可能会问了，我不想用 .router-link-active 这个class名称，想自己定义一个。这个只要在我们定义路由的时候添加一个 linkActiveClass 属性，后面跟着你想要的class名称即可；
const router = new VueRouter({
routes, // （缩写）相当于 routes: routes
linkActiveClass:"my-ctive",
})
到这里demo1结束。
问题2：在开发商城类似的webApp的时候，会遇到一个页面里需要两个或者两个以上的路由（一个主要路由各个模块间跳转，另一个则是商品分类，对应各个类型商品页面）。
这个对于demo内容有重复的我就不说了，直接看不一样的地方：
HTML:
<div id="app"> <h1>Hello World!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/" exact >Go to home</router-link> <router-link to="/news">Go to news</router-link> <router-link to="/prodects">Go to prodects</router-link> <router-link to="/about">Go to about</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div>
接下来，依旧按四步来，
1.定义vue组件 :需要在组件中添加<router-link>；
const prodects = {
template: `
<div>
<h2>my prodects </h2>
<router-link to="/prodects/book">Go to book</router-link>
<router-link to="/prodects/fruit">Go to prodects</router-link>
<router-view></router-view>
</div>
`
}
const book = {template: "<div> this is book </div>"}
const fruit = {template: "<div> this is fruit </div>"}
2.定义路由，这里需要注意的：children 中的 path 不需要我们填写完整的只要是“ /” 后面的即可
const routes = [
{ path: '/', component: home},
{ path: '/news', component: news},
{ path: '/about', component: about},
{ path: '/prodects', component: prodects,
children: [
{
path:"book",
component:book,
},
{
path:"fruit",
component:fruit,
},
],
},
]
3.创建router实例，并将定义的路由传入(和demo1一样）
4.创建和挂载根实例(和demo1一样）
最后的效果:
到此demo2结束
问题3,在我们开发webApp，过度效果动态加载可以大大增加用户体验，vue-router也给我们提供了他的解决方案。
html，这里的需要在 <router-view> 外面增加 <transition> 注意添加：增加name属性，来自动添加 css过度类名：例如：name:”fade”,就会自动拓展为：fade-enter 和 fade-enter-active。
<div id="app"> <h1>Hello World!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/" exact >Go to home</router-link> <router-link to="/news">Go to news</router-link> <router-link to="/prodects">Go to prodects</router-link> <router-link to="/about">Go to about</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <transition name="fade" mode="out-in"> //mode属性则控制离开/进入的过渡时间 <router-view></router-view> </transition> </div>
CSS样式
.my-ctive{
color: red;
font-weight: 600;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s ease;
}
.fade-enter, .fade-leave-active {
opacity: 0
}
.child-view {
position: absolute;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}
1.定义vue组件，通过在wacth属性添加‘ $route’,来监视路径的变化，并且根据路径来动态的添加过度样式，注意：这里 <transition> 的 name 是”：name ” , 因为需要动态的添加。
const prodects = {
template: `
<div>
<h2>my prodects </h2>
<router-link to="/prodects" exact>Go to Default</router-link>
<router-link to="/prodects/book">Go to book</router-link>
<router-link to="/prodects/fruit">Go to prodects</router-link>
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
`,
data() {
return {
transitionName: "slide-left"
}
},
watch:{
'$route'(to,from){ //ES6新写法 和 '$route':fun()一样
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
console.log(this.transitionName)
}
}
}
2.定义路由；
const routes = [{
path: '/',
component: home
}, {
path: '/news',
component: news
}, {
path: '/about',
component: about
}, {
path: '/prodects',
component: prodects,
children: [{
path: "book",
component: book,
}, {
path: "fruit",
component: fruit,
},{
path: "",
component: Default,
}, ],
}, ]
3.创建router实例，并将定义的路由传入(和demo1一样）
4.创建和挂载根实例
const app = new Vue({
router,
data(){
return {
fade:"fade"
}
}
}).$mount('#app')
最后效果：
demo3结束；
通过这三个案例，我相信对于看完的同学，对vue-router,应该有了基本的认识，对于基本开发也应该没什么问题了！
对于能看到这里的朋友，我表示非常感谢。希望各位能多多指出我的足，我知道我现在这个教程肯定有很问题，但是我还是想帮助更多还是在入门阶段朋友更好的学习，因为当初我（一个园林工程毕业学生）也是通过前辈们一篇又一篇的教程，才让我走到今天，我也会坚持争取每周都能更新！
原文地址：https://my.oschina.net/gujieyi/blog/758930