vue项目实现页面跳转
  AnyLlCIhvKpr 2023年11月12日 19 0

问题描述:

vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转。

实验结果与讨论:

1.创建一个vue-cli默认项目(仅包含babel)

vue项目实现页面跳转

2.以管理员身份进入创建的文件路径内,并运行命令npm install vue-router –save

(如果已经安装好淘宝镜像可运行cnpm install vue-router–save)

vue项目实现页面跳转

3.在package.json里可以进行检查到是否已经成功配置vue-router。

vue项目实现页面跳转

4.新建一个views文件夹,并在该文件夹下新建home.vue,about.vue两个组件

vue项目实现页面跳转

5.APP.vue中如下设置


 =
 =
 =home |
 =about





 {
: ;
: ;
}

6.进行main.js的配置


import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
   {
     path: '/',
     name: 'home',
     component: Home
   },
   {
     path: '/about',
     name: 'about',
     component: () => import( './views/About.vue')
   }
 ]
})

9.最后的运行结果如下:

vue项目实现页面跳转

vue项目实现页面跳转

问题总结:

在本次的实验中,通过cmd命令提示符中安装vue-router,并配置router.js实现页面跳转功能。虽然已经成功实现简单的页面跳转功能,但是并未将router.js中的定义路由、定义组件等阐述清楚,后续将进行研究页面跳转功能。



【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月12日 0

暂无评论

推荐阅读
AnyLlCIhvKpr