vue-router作为vue的生态系统一员，帮我们解决了项目中路由的相关问题，包括路由切换，路由拦截等问题。此文将讲述如何在vue项目中使用vue-router
-
安装
cnpm install vue-router
-
配置
scr目录下新增router文件夹,然后新增index.js文件
目录结构
index.js内容如下:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
//首页
import Home from '../components/home/Home'
import Index from '../components/home/Index'
Vue.use(Router)
export default new Router({
routes: [
// 首页模块
{
path: '/', component: resolve => {require(['../components/home/Home'], resolve)},
children: [
{path: '/', name: 'index', component: resolve => {require(['../components/home/Index'], resolve)},},
{path: 'product1', name: 'product1', component: resolve => {require(['../components/home/Product1'], resolve)},},
{path: 'product2', name: 'product2', component: resolve => {require(['../components/home/Product2'], resolve)},},
{path: 'contact', name: 'contact', component: resolve => {require(['../components/home/Contact'], resolve)},},
// 登录模块
{path: 'signin', name: 'signin', component: resolve => {require(['../components/sign/Signin'], resolve)},},
{path: 'signup', name: 'signup', component: resolve => {require(['../components/sign/Signup'], resolve)},},
{path: 'forgetpwd', name: 'forgetpwd', component: resolve => {require(['../components/sign/ForgetPwd'], resolve)},},
{path: 'resetpwd', name: 'resetpwd', component: resolve => {require(['../components/sign/ResetPwd'], resolve)},}
]
}
]
});
其中首页和index组件使用了import形式，登陆模块等使用了懒加载的形式，这两种区别是什么呢？懒加载，顾名思义，在需要用到的时候才加载。如果全部使用import形式，vue编译后编译全部组件，导致生成的vendor.js体积过大，从而进入网站首页时会很慢。因此通过懒加载的模式可以提高首页的加载速度，当然提高首页加载速度不止这个方法。
index.js中可以看出，路由routes由一个个路由对象组成，这个路由对象可以嵌套子路由，子路由对象加到children属性中。如果要进入子组件中，父组件的path加上子组件的path就是子组件的url了。
路由对象的name表示这个路由的名称，componet是对应的组件。我们还可以在路由对象中假如一些元数据，在上述代码中未展示
-
引入
在上述步骤中，如果我们要新增路由结构，可以直接修改index.js中的路由表。现在需要在main.js中引入
import router from './router'
new Vue({
el: '#app',
router,
i18n,
store,
components: { App },
template: '<App/>'
})
-
使用
最终我们在页面上怎么使用这些路由来实现页面跳转呢
在页面上：home组件
<template>
<div id="home">
<el-container>
<!--导航区-->
<el-header>
<el-menu mode="horizontal" router :default-active="workManage">
<el-row>
<el-col :span="3">
<el-menu-item index="/">{{$t("menuName.home")}}</el-menu-item>
</el-col>
<el-col :span="3">
<el-menu-item index="/product1">{{$t("menuName.product1")}}</el-menu-item>
</el-col>
<el-col :span="3">
<el-menu-item index="/product2">{{$t("menuName.product2")}}</el-menu-item>
</el-col>
<el-col :span="3">
<el-menu-item index="/contact">{{$t("menuName.contact")}}</el-menu-item>
</el-col>
<el-col :span="3" :offset="6">
<el-select v-model="langValue" @change="toggleLang" size="mini" style="margin-top: 16px;width:100px;">
<el-option v-for="item in LangOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="1">
<el-menu-item index="/signin">{{$t("menuName.signin")}}</el-menu-item>
</el-col>
<el-col :span="1">
<el-menu-item index="/signup">{{$t("menuName.signup")}}</el-menu-item>
</el-col>
</el-row>
</el-menu>
</el-header>
<!--主内容区-->
<el-main>
<transition name="fade">
<router-view/>
</transition>
</el-main>
</el-container>
</div>
</template>
在导航区定义了菜单，每个菜单的index指向的是路由表的path属性。主内容区<router-view/>就是要展示的子组件，也就是父组件会根据路由动态切换子组件。
通过点击这些菜单，我们就会实现跳转页面
编程式跳转
this.$router.push({path: '/signup'});
通过上段代码，我们就可以在代码中实现页面跳转了。
-
总结
本文简单的介绍了vue-router的实现，以及怎么配置路由表，以及如何定义菜单跳转。路由拦截以及路由校验等问题，将会在其它文章中介绍。
