重读vue电商网站33之实现首页路由重定向

最新推荐文章于 2024-03-11 20:35:34 发布
最新推荐文章于 2024-03-11 20:35:34 发布
阅读量167 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41632427/article/details/125141263
版权

我们想要在登录之后重定向到 /welcome 路径，于是需要添加子路由children 属性，然后设置 redirect重定向到我们的子路由。


然后在我们组件 Home.vue 的右侧主体区域，放置一个路由占位符 router-view 即可。

 

 

前端歌谣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue前端项目-首页-实现首页路由重定向
踏 浪的博客
04-02 4500
目录 1、创建首页组件 2、修改路由 3、在 AppMain组件中设置路由占位符 实现效果: 1、创建首页组件 新建 src / views / index.vue 组件, 内容 <template> <div class=""> <h1>这是index 首页</h1> </div> </temp...
vue电商网站后台管理系统模板
06-19
一款基于vue实现的电商网站后台管理系统模板，适合电子商务购物网站admin系统。界面使用tab选项卡的方式，无刷新效果很好。这套后台模板是github项目，请参考帮助文档。
【VUE项目实战】20、实现首页路由重定向及左侧菜单路由链接
程序猿之洞
11-20 4799
接上篇《19、实现侧边栏折叠与展开功能》 上一篇我们实现了左侧菜单的折叠与展开的效果，本篇我们来实现首页的路由重定向，以及左侧菜单改造为路由链接的效果。 一、首页路由重定向 目前我们登录系统，后自动跳转到home页，在home页的右侧主区域，显示的是一个静态信息： 实际就是home页面的一个div区域： <!-- 右侧内容主体 --> <el-main>Main</el-main> 我们需要将该内容重定向到一个欢迎页面，而不是主框架home的一个div，该如何做
Vue3全家桶 - VueRouter - 【2】重定向路由
qq_48937489的博客
03-11 686
【代码】Vue3全家桶 - VueRouter - 【2】重定向路由。
Vue知识整理，专题之路由：4、路由redirect重定向的使用-设置默认页面、设置选中路由高亮的两种方式
鲁迷那的专栏—坚持实践后再写出来！
03-28 1万+
一、前言 上一节我们介绍了路由-路由（vue-router）的基本使用、router-link的使用，详细可参考博文：原创Vue笔记整理，专题之路由：3、路由-路由（vue-router）的基本使用、router-link的使用这篇文章我们将介绍：路由-路由redirect重定向的使用、设置选中路由高亮的两种方式 二、路由-路由redirect重定向的使用 1、设置默认页面 我们以上篇......
【Vue2+3入门到实战】（16）VUEVue路由的重定向、404、编程式导航、path路径跳转传参 详细代码示例
shenchengyv的博客
12-30 2047
编程式导航有几种跳转方式？编程式导航，如何跳转传参？1.path路径跳转query传参this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'})动态路由传参this.$router.push('/路径/参数值')path: '/路径/参数值'})2.name命名路由跳转query传参name: '路由名字',query: {参数名1: '参数值1',
Vue_shop学习30：首页home路由重定向welcome
weixin_47295886的博客
04-18 321
第三步：将welcome设置为home路由的子路由规则（children）登录成功，直接重定向访问welcome地址，并且在内容区域展示欢迎组件。第二步：在home的内容区域放置weclome的路由占位符。第一步：定义欢迎组件。第一步： 创建新组建。
vue 刷新浏览器重定向到首页（或者某一个页面）
热门推荐
qq_41559229的博客
04-10 2万+
最近用vue写一个模仿qq音乐的单页面应用， 因为看到黄轶老师的例子是浏览器刷新会路由会重新定向到首页的， 所以就想应该是跟路由有关系的。 而且我注意到一个细节。就是我在其他的页面刷新的时候，它会先短暂显示首页，再跳到刷新之前的页面， 所以是不是可以理解为项目刷新会先经过首页，再到刷新之前的页面。 所以，我就在我的App.vue。写了下面的代码 created(){ if(thi...
Vue刷新浏览器后重定向到首页或者某一个页面
weixin_49141728的博客
09-09 5039
记录一下项目需要的一些小优化,刷新浏览器时回到首页.一般来说vue项目刷新浏览器之后还会继续跳动刷新之前的页面. 我们只需要要App.vue中的created方法中添加相关判断即可 这里的/index可以换成具体需要跳转的页面,具体代码如下: <script> export default { name: 'App', created() { if(this.$router.path !== '/index'){ this.$router.replace('/.
vue路由重定向
m0_51933554的博客
10-25 446
当登录时，进入首页（home）的时候在main中显示欢迎页
vue刷新重定向去首页
weixin_42112342的博客
12-23 969
重定向去首页
基于Vue的电商购物网站设计源码
05-23
vue_shop是一个基于Vue的电商购物网站设计源码，包含36个...这个项目为电商购物网站提供了一个全面的设计方案，使用Vue、JavaScript、HTML和CSS等技术实现网站的界面和功能，支持多平台浏览，具备良好的响应式设计。
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+element简单实现商城网站首页，模仿电商商城
04-17
vue+element简单实现商城网站首页，模仿电商商城，简洁易懂的经典vue项目布局，无论是作为学习模板还是产品实现都是可以的，拓展性强大，本项目基于elementui实现，从这里可以轻松学到页面头底部共用、菜单、轮播图...
基于Vue的电商购物网站搭建设计源码
最新发布
05-28
本项目是基于Vue的电商购物网站搭建设计源码，包含277个文件，其中包括128个PNG图像文件、51个JPG图像文件、48个Vue组件文件、20个JavaScript文件、5个JSON配置文件、4个EOT字体文件、4个SVG文件、4个TTF字体文件、4...
vue2项目window.open打开一个新窗口刷新总回到首页（重定向页面）
Pure_White520的博客
06-26 1859
vue2使用window.open打开新窗口总跳回首页
前端学习（1886）vue之电商管理系统电商系统之首页路由的重定向主页侧边栏路由链接的改造
歌谣的博客
08-08 167
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' import Welcome from './components/Welcome.vue' Vue.use(Router) const router = new Router({ rout
首页路由重定向及左侧菜单路由链接
weixin_47673864的博客
06-10 291
需要将该内容重定向到一个欢迎页面，而不是主框架home的一个div需要定义一个“welcome”组件，然后在home组件的“Main”的位置，放置一个路由占位符，然后“welcome”的路由，设置为home组件的子路由，以此来显示“welcome”组件的内容。在路由配置文件router/index.js中，配置Welcome组件的路由信息： 定义完路由规则后，我们在home组件中为“Main”区域添加路由占位符： 将每一个二级菜单修改为路由链接即可。复杂一点的方法是为每一个菜单添加“router-l
vue地址栏输入路由跳转到首页，未登录跳转到登录页面的方法
weixin_50251467的博客
04-28 954
在router的index.js文件夹里面配置。
vue实现三级路由重定向
05-30
Vue.js是一种流行的JavaScript框架，它可以方便地实现前端路由重定向。下面是在Vue.js中实现三级路由重定向的步骤： 1. 在路由文件中定义三级路由，并设置其重定向属性： ``` // router.js const router = new ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值