Vue | 43.尚硅谷补充 - 通过函数触发路由跳转、嵌套路由

最新推荐文章于 2023-08-01 09:33:15 发布
最新推荐文章于 2023-08-01 09:33:15 发布
阅读量180 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyxyxyxyxyxyx/article/details/120590627
版权

文章目录

0.参考视频

120.嵌套路由

1.通过函数触发路由跳转

1.1.目标分析

在"为我评分"界面，若评分少于3分，就会通过路由("/form")跳转到"表单填写"

QQ录屏20211002225917

1.2.目标实现

在函数中，通过this.$router.replace( "xxx" )来切换当前的路径：

image-20211002230148527

2.嵌套路由

2.1.目标分析

在其中一个由<router-view>渲染出来的组件中，再定义一个由<router-view>渲染出来的组件，以形成嵌套路由

QQ录屏20211002235042

2.2.目标实现

这一步实现的前提，是已有一个注册过的路由器

若还未注册，请见文章42.尚硅谷补充 - 路由基本使用

  1. 创建组件"Low"和"High"，分别是低分和高分时展示出来的组件

    image-20211002233838888

    image-20211002233851105

  2. 在"Star"组件中用<router-view>定义路由组件要展示的位置

    image-20211002234435939

  3. 在index.js的路由器中引入组件，用children属性定义子路由

    image-20211002234848903

    image-20211002234746679

xyx-Eshang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由的钩子函数有哪些？都做了哪些事情？
孙叫兽的博客
11-18 3801
Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 路由的钩子函数总结有6个 全局的路由钩子函数：beforeEach、after...
vue 路由跳转后执行跳转后的页面里的函数_小白vue入坑自总结
weixin_39886956的博客
11-20 2669
一、.html页面引入vue，了解vue的基础指令和整个vue实例的基础架构1.如何快速地搭建一个vue应用？现在不需要提前安装任何环境· 安装Vue，最简单的是创建一个.html页面，使用<script>标签引入Vue· 创建Vue实例，创建挂载点（dom）· 设置数据，挂载元素· 渲染，把vue实例的数据绑定到指定的视图上2.关于制定模板的方式：1. 以上这种方式的模板的来源是通过...
在函数组件Hooks中跳转路由
weixin_45264424的博客
08-30 1343
使用 withRouter： import { Route, withRouter } from "react-router-dom"; function App(props) { const handleGoTo = () => { props.history.push('/home') } return ( <div> <button onClick={handleGoTo}>跳转</button> &l
vue 实现在函数中触发路由跳转的示例
12-29
如下所示： <span click=clickFn>点我</span> methods:{ clickFn:function(){ this.$router.go('/login');//其中login是你定义的一个路由模块 } 以上这篇vue 实现在函数中触发路由跳转的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue路由的钩⼦函数
温情
06-19 738
路由的钩子函数有六个 全局的路由钩子函数：beforeEach、afterEach 单个路由的钩子函数：beforeEnter 组件内路由钩子函数：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 全局路由钩子函数 全局前置守卫： beforeEach(to, from, next) router.beforeEach: 在每次每一个路由改变的时候都会执行一遍 to：将要进入的路由对象 from: 当前正要离开的路由对象 next nex
vue-路由（六）- 面经案例
最新发布
02-17
Vue Router是官方支持的路由管理器，它使得在单页应用（SPA）中管理页面跳转和组件状态变得简单。在"vue-路由（六）- 面经案例"中，我们可以探讨几个常见的面试问题和相关知识点。 1. **Vue Router的基本概念** - ...
详解vue嵌套路由-query传递参数.zip
02-08
本篇将深入探讨Vue的嵌套路由以及如何通过`query`参数进行数据传递。 一、Vue Router简介 Vue Router是Vue.js官方的路由库，它允许我们定义和管理应用的路由，实现组件化的导航。通过定义路由配置，我们可以轻松地...
vue 路由嵌套高亮问题的解决方法
08-27
这是因为再次触发路由跳转时，Vue Router没有执行新的渲染过程。 3. **解决方法**： - **监听路由变化**：在子路由的组件中，我们可以监听`$route`对象的变化，一旦路由发生变化，我们就可以进行相应的处理。例如...
vue-router路由 myv源码.zip
09-03
- **路由跳转逻辑**：当调用 `router.push` 或其他导航方法时，Vue Router 如何更新视图。 - **组件懒加载**：源码如何处理组件的按需加载，如何拆分代码块，以及何时触发加载。 - **路由元信息（meta）**：如何使用...
深入理解vue路由的使用
12-11
- **导航守卫**：定义在路由跳转前后执行的钩子函数，如 `beforeRouteEnter`、`beforeRouteUpdate` 等，用于处理权限验证、数据预加载等逻辑。 - **路由懒加载**：按需加载组件，减少初始加载时的资源体积，提升用户...
vue 函数 路由跳转_vue中通过路由跳转的三种方式
weixin_39756895的博客
12-21 709
router-view 实现路由内容的地方，引入组件时写到需要引入的地方需要注意的是，使用vue-router控制路由则必须router-view作为容器。通过路由跳转的三种方式1、router-link 【实现跳转最简单的方法】query:{ //路由传参时push和query搭配使用 ，作用时传递参数id:this.id ,}})}}}在select.vue文件中成都北京e...
路由跳转与传值
weixin_48879122的博客
01-04 975
react中两种路由跳转方式，三个路由跳转传值方式；以及useLocation，useNavigate，useParams三个hookAPI的使用方式；
一文详解Vue中实现路由跳转传参的4种方式（十分详尽）
青春木鱼的博客
08-01 2万+
在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击 a标签链接。vue项目中点击router-link标签链接都属于声明式导航。在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：普通网页中调用location.href跳转到新页面的方式，属于编程式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()。
vue中实现路由跳转的三种方式（超详细整理）
热门推荐
qq_43375584的博客
06-12 9万+
步骤 （7步法 ）：下载模块到当前工程 在main.js中引入VueRouter函数 添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件 创建路由规则数组 – 路径和组件名对应关系 用规则生成路由对象 把路由对象注入到new Vue实例中 用作为挂载点, 切换不同的路由页面代码如下： 2.在跳转路由时, 可以给路由对应的组件内传值 在router-link上的to属性传值, 语法格式如下 :(方式一)对应页面组件接收传递过来的值(方式二)对应页
vue路由跳转的方式总结
高先生的猫
02-07 1291
vue路由跳转有四种方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. this.$router.go(n) 一、不带参 1.1 router-link <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name .
路由跳转的四种方式
rfalcon的博客
10-21 2365
query和params区别 query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失 1.router-link 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行,
vue2.x跨组件调用router-view组件内的函数的方法
silent_missile的博客
06-07 7768
在上一篇 https://blog.csdn.net/silent_missile/article/details/91128221 介绍了如何跨组件，由激发组件通过emit事件，再通过父组件转发到目标组件来调用 但是如果目标组件是router-view组件，使用方法就有所不同了，因为router-view组件是会随着路由地址改变而改变的 其实调用的方法很简单，就是在router-view...
vue 路由跳转后执行跳转后的页面里的函数_vue-router路由守卫-上
weixin_39853590的博客
11-21 2992
1. 为什么要使用路由守卫？什么是路由守卫？第一次认识路由守卫：之前我做过的小项目里面，我们直接在浏览器网址的地方进行修改就能跳转页面，这是不安全的，因此就需要路由守卫，实现通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，避免非法登录。路由守卫的概念：路由守卫也叫导航首位，路由拦截。官方的解释是：正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。其实我们...
vue-router实现页面路由跳转以及路由嵌套
05-18
1. 声明式导航：通过 `<router-link>` 组件实现页面跳转，该组件会被渲染成一个 `<a>` 标签，点击该标签后会触发路由跳转。 2. 编程式导航：通过 `$router` 对象提供的方法实现页面跳转，例如 `$router.push()`、`$...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值