vue高级4-router嵌套路由（children）、: id、params.id（显示id）、$route.push()、路由重定向（rediect）

最新推荐文章于 2024-04-18 09:44:01 发布
VIP文章 最新推荐文章于 2024-04-18 09:44:01 发布
阅读量5.5k 收藏 3
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43010586/article/details/104574562
版权

path:"/abc/:id"
router这里的abc路径要与home里面的路径一样，：name类似于参数（一般是id）
在这里插入图片描述
home里面的路径，这里的xm和xh就是传的参数
在这里插入图片描述
最后点击about或者news都是显示出about组件，这并不是报错，按F12键也并没有问题，是因为router里面绑定的是About组件，效果不变

最低0.47元/天 解锁文章
别狗了
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 单页内使用router-link跳转,动态使用router.push()实现页内跳转，跳转到其他组件
晓晓爱车的博客
08-18 6143
本文是不同的路由跳转对比说明，自己的理解之路，如有理解错误，望各位提点一二！！！！！ 一、配置router中的index.js(使用npm命令创建的项目：router文件夹中是index.js)，配置（路由）如下： //路由配置 import App from '../App' export default [{ path: '/', component: App, //顶层路由，...
vue-router 配置多级路由时的踩坑记录
cscscssjsp的博客
09-27 2731
1.在router.ts内，只有根路径使用 '/' 就可以，二级路由以及三级都写在children下，二级路由可以配置'/'，配置后是也是一个根路由，和'/'是同级的 router/index.ts import Vue from 'vue'; import VueRouter, { RouteConfig } from 'vue-router'; import home from '../views/home' import product from '../views/product' impo
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法// router.js从'vue-router'导入VueRouter; 导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap； 从“路径”导入路径； 导入{路由器}
5. Vue Router4 嵌套路由
最新发布
一名全栈开发工程师
04-18 289
在 Vue Router 4 中，嵌套路由是一种非常重要的功能，它允许我们创建更复杂的 UI 结构，同时保持路由的清晰和易于管理。
vue两组件间值传递 $router.push实现
wendZzoo的博客
05-08 671
两组件间传值，可能包含多种情况，有父子组件和非父子组件，对于父子组件网上有很详细的方法讲解，但非父子组件传值有用bus总线，还有一些其他方法，其中的使用路由跳转的方法讲解太过简洁，难以理解。因为是公司项目，采用的是公司封装的UI框架，但基本上还是采用vue框架，ts编写。所以一些样式结构可能没有参考价值，但我会讲解清楚每一部分作用，主要是路由跳转部分的代码实现。 首先，需求如下图，树状列表每一项...
vue学习之路由
sunpowerz的博客
02-22 200
路由需要引入库“vue-router”   动态路由 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果： const User = { templat...
Vue-Router
weixin_45711074的博客
07-03 1561
vue脚手架的路由部分
Vue--Router--嵌套路由(children)的用法
IT利刃出鞘的博客
08-11 1万+
本文介绍Vue Router的嵌套路由的用法。 嵌套路由用于实现页中页效果，例如：用户页面中，有登录页面和注册页面，这两个页面通过标签切换。
Vue-Router嵌套路由children的使用
qq_45647792的博客
07-10 3670
嵌套路由就是父路由中嵌套他的子路由，父路由中有自己的路由导航和路由容器（router-link、router-view）（前者用于跳转，后者用于显示且必须位于父路由中）（前者可以没有，后者不能没有，否则进行跳转后路径会变化，但页面不发生变化）。嵌套路由使用于实现页中页效果，如若依框架中的首页、用户管理等页面的显示。
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
（已解决）Vue routes的 children使用（小白来看，包会！）
BrianGriffin的博客
02-11 1415
使用了很多vue深层知识，简化并且做到自己的项目上面对小白很有帮助，因为我就是小白，才搞明白。最核心的就是routes的 children使用，所以先做一个例子再套用进去。
解决vue-router 嵌套路由没反应的问题
10-14
主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> <template id=home> 首页 <template id=news> 新闻 然后js里定义路由组件的时候： // 1. 定义...
vue.js this.$router.push获取不到params参数问题
10-15
主要介绍了vue.js this.$router.push获取不到params参数问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在Vue中通过vue-router实现路由嵌套
01-08
如果对Vue的路由不太熟悉 请参看我的另一篇博客：Vue学习之旅Part9：使用vue-router实现前端路由和参数传递 路由嵌套 即路由的组件内部还有子组件 适用于很多业务场景 实现路由嵌套的步骤比较简单 首先 在路由对象里...
Vue-router 路由嵌套
weixin_41040445的博客
01-24 870
例：页面中一级导航 首页+ 新闻 +体育 二级导航 ：首页 > 关于我们+ 联系我们 体育> 足球 + 篮球 + 排球 三级导航：联系我们> 北京 + 上海 在路由参数中怎加一个children属性，值是一个数组，数组内部是一个个路由 JSON数据。 children内部是二级路由的参数，和一级的配置是一样的，所以，如果需要三级路由，还可以继续设置children，无限嵌套。 index.js import Vue from 'vue' import VueRout..
vue 路由id_vue | router路由动态传参携带id进入详情页的三种模式
weixin_34101914的博客
12-23 2059
在项目中,通过一个列表进入详情页,携带参数id渲染不同的详情页,动态传参使用编程式跳转vue传参方法一在router路由配置中{path: '/article/:id',name: 'Article',component: Article,}在列表页中点击事件handleClick(id){this.$router.push(`/article/${id}`) ;}在详情页中使用params获取m...
vueRouter关于children嵌套路由需要多次点击回退之前的页面体验优化
someWhere_weMeet的博客
09-17 1217
当从之前的页面进入一个有多层嵌套的页面时，如果路由使用路由children方式，最后体验会比较差。之前写了一篇关于Vue多级路由重定向以及父级样式丢失的问题带有children，遗忘了体验优化。 从左图到右图。正常体验是返回一次直接回退到之前的页面。如果使用children，在第二图（右边）下的菜单，多次点击全部，代付款，待发货，已完成。。。之类的菜单后，点击返回到图一会出现需要多次点击才...
vue 路由嵌套 及 router-view vue-router --》children
weixin_30640291的博客
06-21 625
vue 路由嵌套 vue-router --》children 在项目的很多子页面中，我们往往需要在同一个页面做一个组件的切换，同时保存这个页面的部分数据（比如树形菜单），进而显示不同的数据，之前我都是通过v-show/v-if来实现，但当切换的组件太多时，上述方法显然不太合理，而在实际开发中，当你切换的组件太多时，后端往往会将你切换组件的路由给你，所以在这说一下关于...
vue-router嵌套路由
09-01
Vue Router 是一个官方提供的 Vue.js 的路由管理器，可以用于构建单页面应用程序。嵌套路由是指在一个路由的组件中使用另一个路由。 在 Vue Router 中，可以通过在路由配置文件中定义嵌套路由。嵌套路由的配置是以树形结构来组织的，父级路由将会嵌套渲染其子路由的组件。 下面是一个示例的路由配置文件，演示了如何使用嵌套路由： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home, children: [ { path: '', component: Dashboard }, { path: 'about', component: About }, { path: 'products', component: Products, children: [ { path: '', component: ProductList }, { path: ':id', component: ProductDetail } ] } ] } ] const router = new VueRouter({ routes }) export default router ``` 在上面的代码中，父级路由 '/' 下包含了三个子路由：Dashboard、About 和 Products。而 Products 路由又包含了两个子路由：ProductList 和 ProductDetail。 在组件中使用嵌套路由时，需要在父级组件中使用 `<router-view>` 标签来渲染子路由的内容。 ```html <template> <div> <h1>Home</h1> <router-view></router-view> </div> </template> ``` 在父级组件的模板中，通过使用 `<router-view>` 标签，子路由的内容将会被渲染在这个位置。 这就是 Vue Router 中嵌套路由的基本使用方法。通过嵌套路由，可以更好地组织和管理应用程序的路由结构，实现更复杂的页面布局和导航功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值