本文主要和大家分享一下在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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。