Vue简单项目中的路由跳转

绝地灬酷狼 2022-02-16 03:21 419阅读 0赞

最近跟着视频在做一个vue的小项目，其中的路由跳转跟我之前学习的router跳转有所不同。此方法简洁明了，所以想把记下来，方便以后的学习。  
    之前学习的router跳转都是在main.js中配置的，本人觉得是有点繁琐的。接下来进入正题。（跳转之前不要忘了安装 npm install vue-router --save ）  
    **这是项目前期的一个整体目录**：  
![在这里插入图片描述][20190422183335244.png]  
    在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文件中引用了三个跳转文件，在地址栏中输入相应的路径地址即可呈现出对应的页面。这样的路由跳转很清晰也很实用，若有看的不懂的地方请在下方评论留言，谢谢。

[20190422183335244.png]: /images/20220216/12c70e924c484c6a8b8ffc9f456b4119.png

发表评论取消回复

表情：

评论列表（有 0 条评论，419人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 154 阅读

相关 vue中的路由跳转方法，详细（vue路由跳转）

简述：Vue路由可以帮助你在单页应用中管理应用的不同页面和页面间的跳转，通过Vue路由，你可以实现页面的动态切换和无刷新加载，提升用户体验和页面性能，今天就来分享下Vue中路

痛定思痛。/ 2023年10月02日 23:42/ 0 赞/ 130 阅读

相关 vue-03-路由-路由跳转的方式

1、第一种就是我们很熟悉的直接在 router-link 里面 to 属性后接路径，或者是通过路由 name 属性绑定 <li> <router-lin

朴灿烈づ我的快乐病毒、/ 2023年07月20日 10:34/ 0 赞/ 124 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 420 阅读

相关 vue项目路由不跳转的问题

安装了路由模块后没有跳转。解决：需要做3件事： 1，配置main.js 2，配置index.js 3，在APP.vue里面加入<router-view> （这个一

太过爱你忘了你带给我的痛/ 2022年12月17日 07:03/ 0 赞/ 289 阅读

相关 vue中的路由跳转

https://blog.csdn.net/weixin\_42981560/article/details/94378469 ![在这里插入图片描述][watermark

绝地灬酷狼/ 2022年09月15日 11:45/ 0 赞/ 348 阅读

相关 Vue简单项目中的路由跳转

最近跟着视频在做一个vue的小项目，其中的路由跳转跟我之前学习的router跳转有所不同。此方法简洁明了，所以想把记下来，方便以后的学习。之前学习的rou

绝地灬酷狼/ 2022年02月16日 03:21/ 0 赞/ 420 阅读

相关 Vue实现简单路由跳转

1. 新建一个项目 -------------------- 2. 在components中新建一个文件这里是test1.vue，内容如下 ----------

拼搏现实的明天。/ 2022年01月11日 05:25/ 0 赞/ 451 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 637 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 612 阅读