vue2.0+vue-router2.0+axios+webpack开发webapp项目（二）

前言：上一篇主要讲了如何生成项目结构，这篇我们看下vue-router2.0（依旧讨厌喷子。）

一.vue-router是做什么的

  使用 Vue.js ，我们已经可以通过组合组件来组成应用程序(也就是我们所说的单页面应用)，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。所以，用 Vue.js + vue-router 创建单页应用，是非常简单的。（如果对组件不了解的小伙伴，可以去翻阅vue官方api，或者上网找些基础视频进行基础学习）；

二.如何使用vue-router进行开发

  首先我们欣赏一下，慕课网-Vue.js高仿饿了么外卖App课程作者黄老师写的课程代码（完整代码地址：https://github.com/ustbhuangyi/vue-sell）

<template>
<div>
<v-header :seller="seller"></v-header>
<div class="tab border-1px">
<div class="tab-item">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<keep-alive>
<router-view :seller="seller"></router-view>
</keep-alive>
</div>
</template>

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import App from './App';
import goods from 'components/goods/goods'; // import引入路由组件
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';

import 'common/stylus/index.styl';

Vue.use(VueRouter); // 引用VueRouter
Vue.use(VueResource);

const routes = [{ // 定义路由(routes)
path: '/',
redirect: '/goods'
}, {
path: '/goods',
component: goods
}, {
path: '/ratings',
component: ratings
}, {
path: '/seller',
component: seller
}];

const router = new VueRouter({ // 创建 router 实例,然后传routes配置
linkActiveClass: 'active',
routes
});

/* eslint-disable no-new */
new Vue({ // 最后创建Vue和挂载根实例
el: '#app',
router,
render: h => h(App)
});

在其中router-link和router-view都是组件：

  使用router-link它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

  注意：当

<router-link>

对应的路由匹配成功，将自动设置 class 属性值 .active。（这是通过linkActiveClass这个配置添加匹配成功类名）

  router-view组件是一个 functional 组件，渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 router-view，根据嵌套路径，渲染嵌套组件。并且在实际项目中还可以通过

<transition></transition>

为渲染添加过渡css3动画，比如淡入淡出等。

<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>

三.使用vue-router我们还能做到什么

1.刚进入应用都是进入到“/”这个路由的，如果想直接进入到“/index”首页页面怎么办呢，使用重定向可以轻松帮我们解决这个问题，下面代码默认匹配到地址为‘/’,则会跳转到path为‘/index’组件

routes: [
{
path: '/',
component: index,
redirect: '/index'
},
{
path: '/index',
name: 'index',
component: index
}
]

2.在web中我们经常要进行页面跳转，我们都已经使用vue-router了难道你还在用window.location.href吗，NoNoNo，vue-router为我们提供了编程式的导航。其中：

  想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。（

<router-link :to="...">和router.push(...)

是一样的）。(以下是文档demo)

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

  当然如果你不想回退到上一界面可以使用这个router.replace(location)，使用方法和router.push(…)十分类似，不同的是，它不会向 history 添加新记录，而是替换记录。

3.我还有一个比较头疼的问题，如果遇到弱网怎么办，虽然现在手机大部分已经升级使用4g，甚至wifi普及率很高，网速大幅加快，但是不排除有用户还在使用3g。一旦遇到使用router.push或者

<router-link>

，首次进入下一路由都会由于加载资源卡停在当前页面。

那么怎么办呢，vue-router提供了导航钩子,利用导航钩子我们可以轻易拦截导航，给出loading组件，提示用户正在加载资源（如下），当加载完成可以将loading隐藏。

r
9566
outer.beforeEach((to, from, next) => {
this.$vux.loading.show({ // vux loading组件
text: 'Loading'
});
next();
});

vue-router中还有其他很多方法，概念及用法可参考https://router.vuejs.org/zh-cn/api/router-instance.html文档进行查看。希望可以和大家相互交流进步。