Vue简单项目中的路由跳转

    最近跟着视频在做一个vue的小项目，其中的路由跳转跟我之前学习的router跳转有所不同。此方法简洁明了，所以想把记下来，方便以后的学习。
    之前学习的router跳转都是在main.js中配置的，本人觉得是有点繁琐的。接下来进入正题。（跳转之前不要忘了安装 npm install vue-router --save ）
    这是项目前期的一个整体目录：

    在router文件夹中包含了3个文件夹和一个主路由index.js文件。这三个文件夹中都新建了index.js文件用来配置各自的路由跳转，而在总的index.js文件中引用。

router—cinema—index.js

export default{
    path : '/cinema',
    component : () => import('@/views/Cinema')//引用文件
}

    每个跳转的js文件的格式都是相同的，修改一下对应的路劲和引用的组件就OK了。

router—index.js

import Vue from 'vue'
import Router from 'vue-router'
import movieRouter from './movie'
import mineRouter from './mine'
import cinemaRouter from './cinema'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
      movieRouter,
      mineRouter,
      cinemaRouter
  ]
})

    这样一来就在主路由index.js文件中引用了三个跳转文件，在地址栏中输入相应的路径地址即可呈现出对应的页面。这样的路由跳转很清晰也很实用，若有看的不懂的地方请在下方评论留言，谢谢。