【Vue】添加新页面

已于 2022-05-24 22:51:34 修改
阅读量1.4w 收藏 24
点赞数 7
分类专栏： # Vue 前端 文章标签： vue.js 前端 javascript
于 2022-02-05 22:38:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxzone/article/details/122794209
版权
本文介绍了如何在Vue项目中添加新组件HelloWorld，并详细说明了如何在src/router/index.js中配置路由，以通过/test路径访问。重点在于HTML基础和路由模式设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 在【src\components\】路径下添加新vue文件，例如下图（图省事直接就复制了HelloWorld.vue，修改了一下里面的内容，需要懂html基础即可）


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


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

加载页面 跳转 新页面 vue
global_coding的博客
05-21 789
加载页面 跳转 新页面 vue
1、Vue示例项目，添加一个新页面
07-08
1、Vue示例项目，添加一个新页面
vue-product-page:这是一个产品页面，用户可以添加新产品并查看所有产品
03-31
Vue产品页面
Vue基本使用
最新发布
ufosuai555的博客
03-26 921
Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM 就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。MVVM架构中，View和Model之间并没有直接的联系，
Vue如何创建一个新页面以及相关路由配置详解
HHX_01的博客
01-10 8537
发现宝藏 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新建页面
weixin_44694538的博客
04-06 3884
在src下面新建view文件夹，然后新建一个vue页面(以/src/view/home.vue为例) vue页面中只能是template为最外层标签，里面有且仅有一个div标签 <template> <div class="home"> <div class="title">这是一个{{msg}}页面</div> ...
vue新增页面开发方法简单总结
BHSZZY的博客
12-07 4986
实际工作中，一般只是新增/修改已有vue项目的页面，很少从零开始搭建一个新的vue项目。 在此简要总结下新增页面的开发方法。1.首先找一个相似的页面，复制一份，修改为不同的名称。 (1)例如，有一个页面，位于这个文件夹： 其中有3个文件： 访问路径是： (2)可以把这个文件夹整个复制，放在相同的目录下，文件夹重命名为，其中也是包含这3个文件。 这样，就可以用以下路径访问到： 2.新文件夹中，一般不用修改，只修改文件即可。3.如果要在其它页面新增按钮，跳转到这个新页面，可以参考以下方法： 说明： 例如，在页
vue 添加页面 新进入一个页面(Steps步骤条 + Card卡片)
taiguolaotu的博客
06-15 861
【代码】vue 添加页面 新进入一个页面(Steps步骤条 + Card卡片)
新手vue构建单页面应用实例代码
08-29
使用以下命令创建一个新的Vue项目： ``` vue init webpack project cd my-project npm install ``` 配置Webpack 在`package.json`文件中，添加以下配置： ``` "scripts": { "dev": "node build/dev-server.js" ...
vue项目添加多页面配置的步骤详解
10-16
这样做的好处是，当需要添加更多页面时，只需要在这个对象中添加新的属性即可。 **3. 开发环境读取多入口配置** 在`webpack.base.conf.js`中，我们需要将多入口配置添加到`entry`对象中，如下所示： ```javascript ...
在已有的Vue项目(新增页面)
热门推荐
FromNowOnUntilTheEnd
07-26 1万+
1、在router文件夹下的index.js，仿照原有的代码，import新页面的路径 2、在routes/children下，仿照原有代码，添加内容   3、在api/mock.js下，仿照原有代码，添加内容，修改resCanme页面名字，resOrder页面所属的dtree位置,Url页面路径 ...
vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2
快乐学习
04-17 1万+
本文中教学如何从创建vue项目到从Element UI官网引用组件来创建一个新的vue页面，包括路由注册这些都有详细的说明介绍Element UI是一个基于Vue.js的组件库，提供了一套丰富、美观、易用的UI组件，包括表单、弹窗、导航、布局、数据展示等各种常用组件。 Element UI旨在帮助开发者快速构建高质量的Web应用程序，使得前端开发更加高效和便捷。
Vue快速开发一个主页
qq_45726327的博客
03-05 2652
这里讲述我们如何快速利用Vue脚手架快速搭建一个主页。
在vue框架中如何添加一个vue页面？常见的router，service，store/module文件夹的结构是什么？
weixin_64123373的博客
08-15 504
把框架搞懂是了解项目不可缺少的一步。
vue添加页面
weixin_30879833的博客
06-30 1094
1 创建vue文件 进入项目的components文件夹下，右键创建文件Dashboard.vue,跟着原始项目学吧，咱首字母也大写。 打开HelloWorld，把里面的内容复制到新创建的DashBoard中。把data中对应的msg修改为dashboard，把name也修改为DashBoard 2 修改路由文件 打开route文件夹下index.js文件。 在开...
Vue入门教学——编写第一个页面
计算机硕士的博客
11-10 1169
Vue入门教学——编写第一个页面。以Vue2.0为例。
给Vue添加的第一个页面
qq_38365099的博客
12-29 1836
1.创建Vue文件 进入项目的components文件夹下，右键创建文件Hello.vue。 打开Hello.vue，写自己所需要的代码： 2.修改路由文件 打开route文件夹下index.js文件。导入刚刚写的Vue文件 在routes数组中添加一个对象： 此时保存访问一下地址：http://localhost:8080/#/HelloUrl 然后就好啦!如下图 ...
vue项目中创建新页面的配置方法
zhouhouyong_web的博客
11-13 7644
vue项目中创建新页面的配置方法 主要目录和新建目录 新建的login.vue页面配置login路由。 新建一个router下的index.js文件（下面是代码） import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/login' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export
Vue3:动态路由+子页面(新增、详情页)动态路由配置(代码全注释)
qq_45061461的博客
05-23 3631
emm，项目中使用动态路由实现根据后端返回的用户详情信息，动态将该用户能够访问的页面信息，动态生成并且绑定到路由对象中。但是后端返回的不包含像是页面详情页，新增页的权限路由，如果前端在路由对象中写死的话，那每次进入页面都得判断是否将进入一个用户没有权限的页面，但是路由中有存在的。3.GetPossibleDetails 根据传递过来的信息，筛选出存在权限的数据， 转换成路由信息,因为如果在本地中已经定义了全部的页面新增，详情，编辑等页面，但是咱们还是需要根据后端返回的权限中，判断咱们是否注册该页面的路由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

姜太小白

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

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

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

打赏作者

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

抵扣说明：

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

余额充值