建立Home页面的路由，App.vue页面的变化，去与留

最新推荐文章于 2024-02-29 09:00:15 发布
最新推荐文章于 2024-02-29 09:00:15 发布
阅读量345 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40945354/article/details/118148385
版权
本文详细探讨了在Vue.js应用中如何在App.vue组件中设置路由，以实现Home页面的无缝跳转和交互。通过实例分析，揭示了路由的变更过程，以及App.vue在页面切换时的角色，帮助开发者理解Vue应用程序中导航和组件状态的管理。
摘要由CSDN通过智能技术生成

原来，以及我的猜想

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  <router-view></router-view
最低0.47元/天 解锁文章
hamimelon2020
关注
专栏目录
Vue.js 3 实现登录后自动更新 App.vue
____
03-16 1483
需求 使用vue.js 3 用户登陆之后，router 进行replace更新，但 App.vue 中的导航没有更新。 解决办法，使用vuex 的 store，就是先将这个提交在 store里面，然后进行 this.$store.commit('realoadLogin') 触发更新。 示例 App.vue # App.vue <script> import {RouterLink, RouterView} from 'vue-router' export default { comput
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
vue项目中,main.js,App.vue,index.html的调用方法
01-19
如下所示： 1、main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件 2、App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。 1、index.html文件入口 2、src放置组件和入口文件 3、node_modules为依赖的模块 4、config中配置了路径端口值等 5、build中配置了webpack的基本配置、开发环境配置、生产环境配置等 以上这篇vue项目中,main.js,App.vue,index.html的调用方法就是小编
App.vue与home.vue的区别
weixin_40945354的博客
01-06 1585
App.vue还包括底部导航。NavBar 本身包括上面图渲染的内容。router-view Home只包括明细里的内容
vue 组件监听页面切换_vue App.vue里的公共组件改变值触发其他组件或.vue页面监听...
weixin_31448735的博客
12-29 1120
业务场景重现现在我的App.vue里面有一个头部的公共组件，头部组件里有一个输入框，当我输入词条时，将词条传进App.vue里的里的.vue页面，并进行查询获取数据解决思路如下：1.如何拿到头部的词条2.当词条改变时如何触发.vue里的请求数据事件解决方案我是用vuex数据仓库来存储词条的，当词条改变时，修改数据仓库里的词条然后在.vue页面里监听这个词条，当词条改变时触发请求数据的事件代码数据仓...
【前端】Vue项目：旅游App-（13）home：热门数据的网络请求、store和显示
karshey的博客
01-10 700
home：热门数据的网络请求、store和显示
vue项目之home页面的配置
weixin_47409897的博客
10-04 2300
目录 功能： 首先发起请求，获取到左侧菜单选项 点击退出功能 点击二级菜单的时候，保存活跃的path,为了刷新后可以显示之前点击的菜单列表！ 主体使用 <router-view></router-view> 来显示对应的path路径的组件 <template> <el-container> <!-- 头部 --> <el-header> <div> <img
解决vue项目中某一页面不想引用公共组件app.vue的问题
10-14
在Vue.js开发中，我们经常将公共组件如头部导航、侧边栏等放在`app.vue`作为全局组件，这样在每个路由页面加载时都会自动引入。然而，有时我们需要某些特定页面（例如登录页面）不显示这些公共组件，以提供更简洁的...
VUE路由匹配没问题，但是页面显示的还是APP.vue！
佛系女程序员！
02-29 741
VUE路由匹配没问题，但是页面显示的还是APP.vue！
vue3项目（三）---Home
m0_61368323的博客
05-12 340
1.纯展示类组件通用封装思路总结：home页中的HomePanel和GoodsItem这两个组件就是纯展示类的组件。1）搭建纯静态的部分，不管可变的部分2）抽象可变的部分为组件参数非复杂的模版抽象成props，复杂的结构模版抽象为插槽2.home页面使用了图片懒加载。把懒加载封装为了一个插件，可以全局使用。3.使用elementPlus制作轮播图。
vue组件通信
qq_52963857的博客
06-16 789
1.1 vue组件通信1.2 父向子-props1.3 父向子-配合循环1.4 单向数据流1.5 子向父1.6 阶段小结1.7 父组件访问子组件$ref1.8 子组件访问父组件内容：1.9 Vue组件：提供 provide / 注入 inject1.10 处理响应性，加练习1.选中求和
【vue】‘跳转页面’
STATICHIT静砸的博客
11-03 929
比如先做好一个简易的登录页面，login.vue，然后我们还准备一个主页vue，绑定好路由配置后，其中登录按钮的方法中就this.$router.push("/main")即可。然后呢，是把页面封装为一个主键，不要写在App.vue页面中，App.vue里只需要留一个组件占位符即可。之前刚学完四小时入门vue觉得挺简单的，然后开始写的时候被路由这玩意整麻了，看了好多教程都没搞明白怎么操作，然后就又去补了一波路由，现在思路清晰多了。让初始页面转到登录页面即可。主要是用到$router.push()来操作。
关于解决Vue项目启动后，只能访问vue默认页面，无法访问项目中其他页面的问题
weixin_42893818的博客
05-27 1万+
方法很简单，只要在index.js中的Router实例中添加一个mode:"history"属性即可。
Vue项目管理器，运行后启动app界面空白，浏览器报Cannot read properties of undefined (reading ‘prototype‘)
tulingike的博客
06-27 3854
Vue项目管理器，在学习iviewUI前端时遇到的错误vue ui版本使用cil，运行后启动app界面空白，浏览器报Cannot read properties of undefined (reading ‘prototype‘)vue ui版本使用cil，运行后启动app界面空白，浏览器报Cannot read properties of undefined (reading ‘prototype‘)：初学vue使用vue ui功能展开界面无反应，发现需要3.0以上版本才能使用ui命令，于是就进行了更新，
第五章：Vue路由
m0_61927991的博客
08-21 1331
Vue第五章路由、UI
Vue创建注册页面
热门推荐
qq_52335038的博客
10-02 1万+
一、需求： 开发注册页面，对输入账号和昵称进行判空处理，两次密码判断是否相同，注册成功后进入到首页 二、删除一些不需要的组件 1：删除scr/views/下的About.vue和Home.vue 2.把App.vue还原成下图： <template> <div id="app"> <router-view /> </div> </template> <style lang="less"> <
vue基础：在跟组件（App.vue）调用外部组件
谷咕咕
01-21 1万+
vue基础：在跟组件（App.vue）调用外部组件 在vue学习中，我们发现将所有的组件，都放在根组件是不合理的，同样也是低效的。于是我们将不同的模块分割，需要哪个模块的时候就可以直接调用。这类似于html5中模板的性质。 1.首先我们需要创建一个组件，所有的组件可以放在一个目录里，便于规范化管理。 2.创建所有的组件也需要像根组件一样，严格的格式要求。 &lt;template&gt; ...
定义路由组件Home.vue和About.vue 在App.vuez中定义路由链接和路由视图 创建路由模块router.js 挂载路由模块
最新发布
05-28
定义路由组件 Home.vue 和 About.vue 是为了在路由链接被点击时，可以显示不同的组件内容。在 App.vue 中定义路由链接和路由视图是为了将路由链接和路由视图结合起来，使得在页面中显示不同的组件内容。创建路由模块 router.js 是为了将路由链接和路由视图进行管理和组织，方便统一管理和维护。 下面是每个步骤的具体介绍： 1. 定义路由组件 Home.vue 和 About.vue：在这两个组件中分别编写对应的模板、样式和逻辑代码，用于在页面中显示不同的内容。 2. 在 App.vue 中定义路由链接和路由视图：在 App.vue 中使用 router-link 标签定义路由链接，使用 router-view 标签定义路由视图。其中，router-link 标签用于跳转到不同的路由路径，router-view 标签用于展示不同的路由组件内容。 3. 创建路由模块 router.js：在 router.js 中使用 VueRouter 实例进行路由管理和组织。通过配置 routes 属性来定义不同的路由路径和对应的组件，然后在 router 实例中注册这些路由规则。 4. 挂载路由模块：在 main.js 中将 router 实例挂载到 Vue 实例上，使得整个应用程序可以使用该实例进行路由跳转和管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值