【Vue】添加新页面

已于 2022-05-24 22:51:34 修改
阅读量1.2w 收藏 23
点赞数 6
分类专栏： # Vue 前端 文章标签： vue.js 前端 javascript
于 2022-02-05 22:38:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxzone/article/details/122794209
版权
前端 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
Vue
4 篇文章 0 订阅
订阅专栏
  • 在【src\components\】路径下添加新vue文件，例如下图（图省事直接就复制了HelloWorld.vue，修改了一下里面的内容，需要懂html基础即可）


    注意修改name
  • 在【src\router\index.js】文件中添加，以下代码


    注mode模式，按照实际要求进行设置，大概意思可参照VUE.js中访问地址的url带有#的问题_weixin_33802505的博客-CSDN博客
  • 至此执行调试或运行，在浏览地址后加上/test即可访问的新建的页面

姜太小白
关注
  • 6
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
新手vue构建单页面应用实例代码
12-10
本文介绍了新手vue构建单页面应用实例代码，分享给大家，具体如下 步骤： 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一、目录结构： 二、搭建项目 先安装 vue-cli： sudo npm install -g vue-cli 使用vue-cli构建初始化项目：vue init webpack project（创建webpack项目并下载依赖） 输入命令进入项目： cd my-project  安装依赖： npm install np
vue实现动态添加数据滚动条自动滚动到底部的示例代码
01-19
在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的，报错信息如下： VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll (found in <Hello>) 这个一直找不到原因，可能是我vue的版本是2.2不支持吧。。。后来找到一个解决办法： 添加watch方法，监听数据变量的变化，动态添加滚动条，一开始
Vue入门教学——编写第一个页面
计算机硕士的博客
11-10 559
Vue入门教学——编写第一个页面。以Vue2.0为例。
vue 页面
最新发布
weixin_62407745的博客
03-11 400
/ 或者是：<todoButton @changeActive="changeActive"></todoButton> 一个方法。// 或者是：<todoList :todolist="todoList"></todoList> 一个列表。//1、引用多个vue文件 import todoList from "./components/todoList.vue";//监听 放自定义方法，方法名是@xxx的值。name:'文件名',
vue 01 创建一个简单vue页面
Rockandrollman的博客
09-18 424
/data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。一个vue实例，绑定一个容器，一对一关系。
Vue + ElementUI 编辑/新增页面复用总结
zhouzhiwengang的专栏
09-08 4999
前景需求 最近编写简单crm后台管理类项目，涉及到表单的使用上，有着大量的相同内容的表单，根据使用场景分为新建表单与编辑表单。 实战：实现一个客户等级管理功能，其中包含客户等级列表，新建客户等级，修改客户等级信息功能。 客户等级列表： 新建客户等级： 修改客户等级： 从上面图中可以看出，客户等级的编辑表单和删除表单基本一致。 功能实现 实现方式一： <style> </style> <template> <el-c..
Vue如何创建一个新页面以及相关路由配置详解
HHX_01的博客
01-10 3008
发现宝藏 1.路由配置语法格式 2.vue如何创建一个新页面 1.创建Vue组件 2.设计页面结构 3.配置Vue Router 4.更新导航菜单 5.测试导航 3.vue路由配置常见属性 1. path 2. name 3. component 4. meta 5. query 6. params
vue新增页面开发方法简单总结
BHSZZY的博客
12-07 4464
实际工作中，一般只是新增/修改已有vue项目的页面，很少从零开始搭建一个新的vue项目。 在此简要总结下新增页面的开发方法。1.首先找一个相似的页面，复制一份，修改为不同的名称。 (1)例如，有一个页面，位于这个文件夹： 其中有3个文件： 访问路径是： (2)可以把这个文件夹整个复制，放在相同的目录下，文件夹重命名为，其中也是包含这3个文件。 这样，就可以用以下路径访问到： 2.新文件夹中，一般不用修改，只修改文件即可。3.如果要在其它页面新增按钮，跳转到这个新页面，可以参考以下方法： 说明： 例如，在页
在VSCode中添加.vue文件模版
weixin_45034639的博客
09-11 2235
步骤一: 在VSCode中安装插件: Vetur 步骤二: Code–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 步骤三: 清空文件中原有代码 步骤四: 粘贴自定义的.vue模版 <!-- --> <template> <div class=''></div> </template> &...
vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2
快乐学习
04-17 8496
本文中教学如何从创建vue项目到从Element UI官网引用组件来创建一个新的vue页面，包括路由注册这些都有详细的说明介绍Element UI是一个基于Vue.js的组件库，提供了一套丰富、美观、易用的UI组件，包括表单、弹窗、导航、布局、数据展示等各种常用组件。 Element UI旨在帮助开发者快速构建高质量的Web应用程序，使得前端开发更加高效和便捷。
搭建一个vue小页面（入门vue）
weixin_44316925的博客
07-22 7421
搭建一个vue小页面（入门vue） 最近在学习vue框架，找了很久在网上找到下面这篇博客，觉得写得通俗易懂，就是其中有些代码尝试了有一点点的小问题，我猜可能版本不同的问题，造成不同的结果，但框架的思想我是觉得写得很通俗易懂的，供大家共享！ 本文转自http://blog.csdn.net/joshua_hit/article/details/59635160 继续搞Vuejs的前端，在之前我已经在Windows系
在vue中实现嵌套页面(iframe)
10-15
主要介绍了在vue中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-product-page:这是一个产品页面，用户可以添加新产品并查看所有产品
03-31
Vue产品页面
vue动态设置页面title的方法实例
12-28
本文主要介绍了Vue动态修改title的方法，需要的朋友可以参考学习，方法如下： 1.通过自定义指令去修改（单个修改比较好） //1.在main.js 页面里添加自定义指令 Vue.directive('title', {//单个修改标题 inserted: function (el, binding) { document.title = el.dataset.title } }) //2.在需要修改的页面里添加v-title 指令 . 2.使用插件 vue-wechat-title //1.安装插件
vue页面跳转后返回原页面初始位置方法
11-28
vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的 一、main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二、main.js里面vuex状态管理 var store = new Vuex.Store({ state: { recruitScrollY:0 }
vue跳转方式（打开新页面）及传参操作示例
12-28
本文实例讲述了vue跳转方式（打开新页面）及传参操作。分享给大家供大家参考，具体如下： 1. router-link跳转 // 直接写上跳转的地址 <span class=spanfour>link跳转 // 添加参数 // 参数获取 id = this.$...
【Vue】Vue环境搭建
热门推荐
姜太小白的博客
01-24 1万+
一、安装node.js 官网：Download | Node.js 历史版本：Previous Releases | Node.js 下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。 二、设置nodejs prefix（全局）和cache（缓存）路径 1、在nodejs安装路径下，新建node_global和node_cache两个文件夹 2、设置缓存文件夹 npm config set cache "
【Vue】VSCode搭建Vue项目
姜太小白的博客
01-24 8154
在vscode上搭建一个vue项目---初学总结。 1.假设Vscode、nodejs等已经安装好了。 2.全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目。 安装命令： npm install -g vue-cli 打开VScode的终端，调出命令输入框。点击终端-新建终端，输入上述命令，回车，等待安装完成。 3.安装webpack，它是打包js的工具 安装命令： npm install -g webpack 安装方法同上。 4.安装完成之后就可以开始创建
vue 拖拽工作计划日历任务排期
05-18
可以使用第三方库来实现Vue拖拽工作计划日历任务排期，比如`vue-draggable` 。 以下是一个简单的示例： 1. 安装`vue-draggable`： ``` npm install vuedraggable --save ``` 2. 在Vue组件中引入并注册`vue-draggable`组件： ```javascript <template> <div> <draggable v-model="tasks" :options="{group:{name:'tasks',pull:'clone'}}"> <div v-for="(task, index) in tasks" :key="index" class="task">{{ task }}</div> </draggable> <div class="calendar"> <!-- 日历组件 --> </div> </div> </template> <script> import draggable from 'vuedraggable'; export default { components: { draggable, }, data() { return { tasks: ['任务1', '任务2', '任务3', '任务4'], // 任务列表 }; }, }; </script> ``` 3. 将`vue-draggable`与日历组件结合使用，实现拖拽任务到日历中排期的功能。 具体实现方式可以根据具体业务需求来设计。例如，可以在日历中创建任务卡片，将拖拽的任务添加到任务卡片中，并保存任务的时间等信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜太小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值