vue关闭当前路由页面并跳转到其父页面

1.dom中添加关闭或取消按钮

   <el-button type="primary" class="blueLinearbg cancelBtn" @click="cancel" >取 消</el-button>

2.cancel方法中

  /*取消或关闭*/
        cancel(){
          this.$store.dispatch("tagsView/delView", this.$route);  //关闭当前路由
          this.$router.push({ path: "/wzx/jcjhua/jyjl"});  //跳转至它父页面,路径为地址栏localhost后的路径
        }

在这里插入图片描述

### Vue3 中实现路由嵌套与页面跳转Vue3 应用程序中,通过 `vue-router` 可以轻松配置父子组件间的导航以及子路由的定义。为了创建一个具有嵌套路由的应用,在安装引入 vue-router 后,需按照特定结构来设置路由表。 #### 定义父级和子级路由 当构建一个多层级视图应用时,可以在路由配置对象内指定 children 属性用于声明子路径[^1]: ```javascript const routes = [ { path: '/parent', name: 'Parent', component: ParentComponent, children: [ { path: '', name: 'ChildDefault', component: ChildDefaultComponent }, { path: 'child-one', name: 'ChildOne', component: ChildOneComponent } ] } ]; ``` 上述代码片段展示了如何在一个名为 `/parent` 的顶级路由下添加两个子路由:默认显示 (`''`) 和带有额外路径部分 (`'child-one'`) 的子页。 #### 使用 `<router-view>` 渲染不同级别的视图 为了让子组件能够被渲染出来,需要在其对应的父组件模板里放置 `<router-view>` 标签[^2]: ```html <!-- ParentComponent.vue --> <template> <div class="parent"> <!-- 这里的 router-link 将会链接到不同的 child 路径 --> <nav> <router-link to="/parent">Default</router-link> | <router-link to="/parent/child-one">Child One</router-link> </nav> <!-- 子组件将会在这里展示 --> <router-view></router-view> </div> </template> ``` 此布局允许点击导航栏中的链接后加载相应的子组件内容至该位置。 #### 页面跳转的方法 除了利用 HTML 锚点标签外,还可以借助编程方式完成页面切换操作。这通常是在事件处理器或其他逻辑处理函数内部调用 `$router.push()` 方法来改变当前 URL 地址从而触发新的匹配规则[^3]: ```javascript // 假设位于某个方法体内执行如下语句可以实现在 JavaScript 控制下的页面转向 this.$router.push({ name: "ChildOne" }); ``` 以上就是关于在 Vue3 中实施路由嵌套及其关联特性——页面之间相互转移的基本介绍;这些知识点对于开发复杂单页应用程序(SPA)非常有用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值