vue跳转页面的几种方法,vuejs页面跳转,vue项目实现页面跳转的方法

vue跳转页面的几种方法,vuejs页面跳转,vue项目实现页面跳转的方法

本文主要和大家分享一下在vue项目中实现页面跳转的方法。vue-router是前端开发中用来实现页面跳转的模块。下面小编就为大家带来如何基于已经创建好的vue-router项目实现页面跳转。有需要的朋友可以参考一下。

:

目录

1.创建一个vue-cli默认项目(仅包括babel)2)2。进入创建文件3。检查配置4。创建视图文件夹5。设置APP.vue6配置main.js 7。运行结果问题描述:

Vue-router是前端开发中用来实现路由页面跳转的模块。下面小编就给大家展示一下如何基于已经创建好的vue-router项目实现页面跳转。

实验结果与讨论 :

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

2.进入创建文件

以管理员身份输入创建的文件路径,并运行命令npm install vue-router -save。

(如果已经安装了淘宝镜像,可以运行CNPM安装Vue-路由器-保存)

3.检查配置

您可以在package.json中检查vue-router是否已成功配置.

4.创建views文件夹

创建一个新的views文件夹,并在该文件夹下创建两个新组件:home.vue和about.vue

5.设置APP.vue

如下设置:

模板

div id='应用程序'

div id='nav '

路由器链接到='/' home/路由器链接|

路由器链接到='/about ' about/路由器链接

/div

路由器-视图/

/div

/模板

风格

#app {

文本对齐:居中;

边距-顶部:60px

}

/风格

6.进行main.js的配置

从“vue”导入Vue

从“vue路由器”导入路由器

从'导入主页。/views/Home.vue '

Vue.use(路由器)

导出默认新路由器({

模式:“历史”,

base: process.env.BASE_URL,

路线:[

{

路径:“/”,

姓名:'家',

组件:主页

},

{

路径:“/about”,

名称:“关于”,

组件:()=导入('。/views/about . vue’)

}

]

})

7.运行结果

如下:

问题 总结 :

本实验在cmd命令提示符下安装vue-router,配置router.js实现页面跳转功能。虽然已经成功实现了简单的页面跳转功能,但是router.js中路由和组件的定义还没有解释清楚,以后会研究页面跳转功能。

关于vue项目中实现页面跳转的方法这篇文章到此为止。关于vue项目中页面跳转的更多信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: