Vue-在vue中如何使用vue-router

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的实现，以及怎么配置路由表，以及如何定义菜单跳转。路由拦截以及路由校验等问题，将会在其它文章中介绍。