最近跟着视频在做一个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文件中引用了三个跳转文件,在地址栏中输入相应的路径地址即可呈现出对应的页面。这样的路由跳转很清晰也很实用,若有看的不懂的地方请在下方评论留言,谢谢。