您现在的位置是:首页 > Javascript
当前栏目
vue项目实现页面跳转
2023-03-15 23:19:18 时间
问题描述:
vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转。
实验结果与讨论:
1.创建一个vue-cli默认项目(仅包含babel)
2.以管理员身份进入创建的文件路径内,并运行命令npm install vue-router –save
(如果已经安装好淘宝镜像可运行cnpm install vue-router–save)
3.在package.json里可以进行检查到是否已经成功配置vue-router。
4.新建一个views文件夹,并在该文件夹下新建home.vue,about.vue两个组件
5.APP.vue中如下设置
<template>
<div id="app">
<div id="nav">
<router-link to="/">home</router-link> |
<router-link to="/about">about</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
text-align: center;
margin-top: 60px;
}
</style>
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.最后的运行结果如下:
问题总结:
在本次的实验中,通过cmd命令提示符中安装vue-router,并配置router.js实现页面跳转功能。虽然已经成功实现简单的页面跳转功能,但是并未将router.js中的定义路由、定义组件等阐述清楚,后续将进行研究页面跳转功能。
实习编辑:衡辉
稿件来源:深度学习与文旅应用实验室(DLETA)
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件