深刻理解vue中路由的跳转

最新推荐文章于 2022-11-28 10:59:57 发布

DukeMr.Lee

最新推荐文章于 2022-11-28 10:59:57 发布

阅读量180

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_43440532/article/details/121087497

版权

重点：看懂这个图基本就搞定了路由跳转的大部分。

解释：

（1）初始化：进入页面时，由于只有ip和端口号，所以使用重定向redirect，转到/home的对应的路由组件A上，完成初始化，此时页面展示的是A组件。

（2）点击/detail相关的路由跳转时，此时由于二级路由对应的是B组件，所以页面呈现了B组件的内容。

（3）点击/home相关的路由跳转时，A组件再次呈现在页面上。

如果所示：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DukeMr.Lee

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

希望每天都能进步一点点

06-25

2644

vue中实现路由跳转的三种方式（超详细整理）

热门推荐

sebeefe的博客

07-31

2万+

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦。...

参与评论您还未登录，请先登录后发表或查看评论

vue路由跳转问题

Huang58_com的博客

02-16

303

路由跳转问题 Vue路由的跳转的四种方式问题描述：在使用this.$router.push和this.$router.replace的时候发生了报错，且不会跳转到对应的页面, 控制台会出现这个报错，但是不影响正常使用，但是又错误还是要解决的解决这$route跳转路由问题报错信息：Avoided redundant navigation to current location 代码： // 这样控制台就能避免路由跳转带来的错误 const originalPush = VueRouter.protot

vue-router 问题：解决路由无限跳转问题

weixin_42385932的博客

02-23

921

问题：输入路由没有的路径时发生无限跳转解决：按vue-template后台的方案，通过重定向进行跳转 { path: ‘/404’, name: ‘404’, component: (resolve) => require([’@/views/error-page/404’], resolve) }, { path: ‘*’, redirect: ‘/404’, hidden: true }，但依然没有解决问题。在排查的过程中，发现控制台有报黄色警告： [vue-router] Dupl

Vue中路由刷新后设置默认跳转页面（redirect）重定向

T8682828的博客

09-13

2797

Vue中路由刷新后设置默认跳转页面（redirect）重定项

阻止路由跳转得方式_vue路由拦截及页面跳转的设置方法

weixin_39922394的博客

12-19

1777

路由设置：router/index.jsexport default new Router({routes: [{path: '/selfcenter',name: 'selfcenter',meta: {requireAuth: true // 配置此条，进入页面前判断是否需要登陆},component: selfcenter}]})main.js：/* eslint-disable no-ne...

vue中局部页面跳转_vue使用感受（二）组件间跳转

weixin_35786588的博客

01-12

1815

想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看。昨天我们聊了一下vue的组件间传值，今天来讨论下我遇到的第二个问题组件间跳转。在不使用前端框架的时候，如果我们要点击菜单跳转到指定页面，一般来说可以使用标签或者在页面中嵌套iframe。前者可以改变页面路径或者通过锚点来跳转到页面指定位置，后者则是在页面中嵌套一个子页面，可以部分刷新，改变内容。不过HTML5已经不再支持if...

vue路由切换loading_Vue中级指南-05 Vue中路由跳的转进度条和数据加载Loading显示

weixin_32263265的博客

01-30

1889

我们在Vue项目中路由跳转时希望出现一个进度条来显示当前跳转状态,或者在数据发起请求时有个loading提示框来提示当前正在加载数据,本篇文章简单介绍一下我在项目中的使用方法。路由跳转进度条NProgress是页面跳转时出现在浏览器顶部的进度条npm install --save nprogress复制代码NProgress 使用// 如果在main.js引入并挂载在Vue实例上,请最在顶部引入,...

vue 路由跳转页面打开新页面_vue-router跳转时打开新页面的两种方法

weixin_39629780的博客

12-20

1万+

vue-router跳转时打开新页面的两种方法最近还是在痛苦的挣扎中挣扎吧记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了)，有两个方法：1、标签实现新窗口打开官方文档中说 v-link 指令被组件指令替代，且不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用标签，但事实上vue2版本的是支持 target="_blank" 属性...

vue4 跳转外部链接_vue项目跳转到外部链接

weixin_39969881的博客

12-20

3962

vue项目中遇到一个打印的功能。思考之后决定点击按钮，跳转到一个HTML页面(后台写的)，利用window.print()方法调用浏览器的打印的功能。所以，现在的问题是，怎样跳转到外部链接。开发vue项目的人都知道，vue项目会分为三个版本：开发，测试，生产，我们可以在config文件夹下面的dev.env.js，prod.env.js，test.env.js配置路径。所以我们就会遇到跨域的问题。...

Vue中路由跳转时出现路由重复跳转的问题解决方案

qq_41373791的博客

10-28

4222

第一种方案出现这种问题是由于安装的vue-router版本太新的问题。所以第一种方案简单直接，直接在命令行中重新安装旧版本的vue-router。yarn add vue-router@3.0 -S 第二种方案在vue-router的index.js文件中添加下列代码： import Vue from ‘vue’; import Router from ‘vue-router’; const originalPush = Router.prototype.push Router.prototype.p

vue-router路由重定向redirect的使用事项

qq_44844751的博客

04-07

2968

vue-router路由重定向redirect的使用事项在一个路由使用redirect重定向到另一个路由时，这个路由本身也需要component对应一个页面，而且这个页面里还要有< router-view >< /router-view>最终才能成功的跳转 ...

Vue 问题笔记 vue-router单页面应用跳转路由时触发事件

zem

07-13

1万+

在使用vue-router时，我们可以很方便地实现单页面应用，当我们想要跳转到“另一个页面”的时候，只要调用vue-routerAPI中的方法，传入相应的路由作为参数即可。单页面应用的一个特点是，如果某个路由已经在本地加载过了，即已经将生命周期走到了mounted的时候，如果我们再进入这个页面，不会再执行created和mounted里面的方法。简单来说，有两个页面A和B，我们使用单页面的...

TP从一个模板页面跳到另一个控制器的模板页面

StoneAgeX的博客

06-05

1701

{:U("控制器/方法")}

vue路由route的两种跳转方式

weixin_43930256的博客

11-28

1540

vue路由route的两种跳转方式

vue的路由怎么换端口_vue中使用proxy配置不同端口和ip接口

weixin_39527487的博客

12-30

1373

问题描述：使用vue-cli创建的项目，开发地址是localhost:8080，由于后台开发不同的模块，导致每个模块请求的ip和端口号不一致例如：http://192.168.10.22:8081 或者 http://192.168.10.30:9999等解决问题：在vue.config.js中配置不同的端口号module.exports ={publicPath: process.env.NO...

VUE路由-IE浏览器中的路由跳转后页面不变更问题

课后笔记

08-14

9961

情景： IE11浏览器中，在进行正常页面跳转操作后（页面A跳转到页面B），点击浏览器的左上角的‘后退’按钮，点击后，可以看到url地址已经发生了变化（url由页面B变为页面A），hash值也已经是上一页的路由，但是浏览器显示的内容却没有发生变化（依旧是页面B）。若将url在一个新的选项卡中复制粘贴是可以打开页面的（页面A用当前url打开没问题）。没有任何报错（页面A和页面B无任何js错误或者...

vue路由跳转说明

qq_55113068的博客

04-16

831

vue路由跳转说明

VUE事件方法中路由跳转

渡目成书

11-15

5976

我们知道跳转直接在标签中写上路径就可以跳转，有时候在事件中我们就需要在方法中写跳转： this.$router.push({path:'/sites/create'});

vue中路由跳转 Maximum call stack size exceeded