vue 路由到新的tab页面

最新推荐文章于 2023-04-28 14:02:37 发布

原创最新推荐文章于 2023-04-28 14:02:37 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue router newtab

本文介绍在Vue项目中如何使用vuerouter实现在单页应用中新开一个tab页的功能。通过点击特定元素触发事件，利用$router.resolve方法获取目标路由的href属性，再用window.open方法在新窗口打开该链接。

vue router切换到新的tab

在vue项目中我们经常会遇到在单页应用中，路由到新的tab页的情况。

直接上代码

<span @click="goAgree" class="agree">《服务协议》</span>

 goAgree () {
      const {
        href
      } = this.$router.resolve({
        name: 'Agree'
      })
      window.open(href, '_blank')
    },

这样就会新起一个页面了。。。。哈哈哈
官网地址

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ruoyu923

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

基于vue多tab页实现

08-10

本模板提供了最精简实现的代码，简单易懂，以及灵活控制tab的接口

解决vue多个路由共用一个页面的问题

08-27

解决 Vue 多个路由共用一个页面的问题在 Vue 开发中，遇到多个路由需要共用一个页面的需求是非常普遍的，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。这篇文章将与您分享解决 ...

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

vue tab切换_vue子路由跳转实现tab选项卡

weixin_39887546的博客

12-12

1377

现在很多的后台管理系统都采用tab选项卡的布局，左边是导航栏固定，右边是对应的页面，每次点击左边的导航标题，只有右面的对应页面再进行切换，而vue要做tab选项卡，推荐使用实现a标签的效果，然后使用实现插槽的效果，把对应的页面 "塞" 进去，具体实现看下面的案例：这是tab选项卡的效果，布局就不多说了，主要是{{a.title}}，其中to是指向你要跳转的路径，这是关键，而就是最终其他子...

vue项目，详情页在新的tab页面展示

m0_61726249的博客

11-24

1428

我们都知道vue是单页面应用，但是有的时候会有不同的需求，比如你点开一个商品的详情，那么它的详情信息需要在新的页面展示才方便，如果还在当前页面的话，对于用户来说体验感不好，查看一个商品的详情，想要再查看另一个商品就需要返回商品列表页，然后再点击其他商品。多了一个返回的步骤。

vue-router打开新的tab页

zq15517069607的博客

05-11

1624

const path = '/approval' const { href } = this.$router.resolve({ path, query: { id: res.data }}) window.location.href = href

vue ant tab 跳到指定tab页传参和路由两种方式

chestnut栗子的博客

07-07

6457

vue 使用ant的tab组件跳转到指定tab页方法一、通过路由传参方法二、通过路由获取to和from进行判断跳哪个tab页注意：新手试错分享，如文章有错误请友善交流~ 1. 路由传参 ① 在原来tabs 的基础上使用activeKey <a-tabs :activeKey="activeKey" @change="tabsChange"> activeKey的具体使用方法可看ant文档 ant tab 文档中给出的类型是string，实测activeKey也可以赋值为数字 ② 同时

vue子路由跳转实现tab选项卡

12-10

如果默认显示的页面不是Tab，比如登录页面，那么我们需要调整路由配置，将登录页面设为根路由，登录成功后再跳转到Tab页面。这时，只需要将Tab及其子路由作为登录页面之后的路由配置即可。总结来说，实现Vue子路由...

vue element 关闭当前tab 跳转到上一路由操作

11-20

方法一 this.$store.dispatch(‘delVisitedViews’, this.$route); this.$router.go(-1); 方法二 this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => ...

vue-router实现tab标签页（单页面）详解

08-29

Vue Router 实现 Tab 标签页（单页面）详解 Vue Router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把...

vue3 的router跳转 - 页面同tab跳转和打开新tab跳转

不想起床

04-28

3711

vue3 路由当前tab跳转和打开新tab跳转

this.$router.push 解决通过 vue-router 打开 tab 页，下次进入还是上次history缓存的界面状态的问题

theVirtual的博客

08-03

3038

vue 路由缓存问题

【Vue框架】vue-router实现Tab页的切换

在热爱技术的路上一直前行。

06-19

3219

代码结构： 2.2 App.vue 2.3 Home.vue 2.4 Movie.vue 2.5 About.vue 2.6 Tab1.vue 2.7 Tab2.vue 3. 实现的功能点击“首页”、“电影”、“关于”，切换一级Tab页面。点击关于中的“Tab1”、“Tab2”，切换Tab1和Tab2。 ...

关于vue项目里面路由跳转，弹出一个新的tab页

gd765241的博客

12-14

2160

<img src="../../assets/bigScreen/set.png" class="img-set" @click="getUrl"> 首先要给要进行跳转到元素绑定一个点击事件然后要在路由文件我这里是index.js里面进行一个配置，可以不加懒加载最后就是在vue文件里面写出点击事件的方法就可以 ...

vue点击按钮实现跳转到另一个vue页面

最新发布

09-06

<think> 我们正在处理一个关于Vue.js中如何从A页面跳转到B页面并定位到B页面中某个特定选项卡（tab）的问题。根据提供的引用，我们可以总结出以下关键点：引用[1]提到了需求效果：从A页面跳转到B页面的tab选项卡指定页。引用[2]展示了一个方法：使用`this.$router.push`并传递query参数（例如`{myTab:1}`）来跳转。引用[3]展示了一个路由配置的例子，但并没有直接关于跳转tab的信息。因此，我们可以推断出实现方法主要涉及两个方面： 1. 在跳转时传递参数（通常通过query或params） 2. 在目标页面（B页面）中根据参数激活对应的选项卡具体步骤：步骤1：在A页面跳转时，通过路由传递参数（例如选项卡的索引或标识）步骤2：在B页面中，通过路由的钩子函数（如created或mounted）获取传递过来的参数，并使用该参数设置当前激活的选项卡。下面我们结合代码示例说明：首先，在A页面的方法中，使用路由跳转并传递参数（使用query）： ```js methods: { jumpToTab() { // 假设我们要跳转到B页面，并激活第二个选项卡（索引为1，因为通常从0开始） this.$router.push({ name: 'BPage', // 路由名称，对应你的B页面的路由配置中的name query: { activeTab: '1' } // 传递的参数，这里我们传递activeTab，值为字符串'1' }); } } ``` 然后，在B页面中：我们需要一个变量（例如activeName）来控制当前激活的选项卡（假设使用element-ui的Tabs组件）在B页面的模板中： ```html <el-tabs v-model="activeName"> <el-tab-pane label="选项卡1" name="0"></el-tab-pane> <el-tab-pane label="选项卡2" name="1"></el-tab-pane> <el-tab-pane label="选项卡3" name="2"></el-tab-pane> </el-tabs> ``` 在B页面的脚本中： ```js export default { data() { return { activeName: '0' // 默认激活第一个选项卡 }; }, created() { // 在组件创建时，检查路由中是否有传递过来的activeTab参数 if (this.$route.query.activeTab) { this.activeName = this.$route.query.activeTab; // 将激活的选项卡设置为传递过来的值 } }, // 注意：由于同一个组件实例可能被复用（当跳转时只是参数变化），所以需要监听路由变化 watch: { '$route'(to) { // 当路由变化时（比如从同一个页面跳转过来但参数不同），更新activeName if (to.query.activeTab) { this.activeName = to.query.activeTab; } } } }; ``` 注意：如果B页面是一个被缓存的页面（比如使用了keep-alive），那么created可能不会再次触发，所以我们需要使用watch来监听路由变化。另外，我们也可以使用beforeRouteUpdate导航守卫来处理： ```js export default { // ...其他代码 beforeRouteUpdate(to, from, next) { if (to.query.activeTab) { this.activeName = to.query.activeTab; } next(); } }; ``` 总结：通过路由传递参数，然后在目标页面中根据参数设置选项卡的激活状态。但是，请注意，上面的例子中我们使用了字符串形式的name（'0','1','2'），因为query传递的参数都是字符串。如果你的activeName在组件中是数字类型，那么你可能需要转换一下，例如： ```js this.activeName = parseInt(this.$route.query.activeTab) || 0; ``` 另外，如果你的选项卡不是通过name而是通过index来控制的（比如v-model绑定的是表示索引的数字），那么你也可以直接使用数字索引，但要注意query中的参数是字符串，需要转换。如果你的选项卡组件使用的是element-ui的Tabs，那么v-model绑定的值对应的是el-tab-pane的name属性（可以是字符串或数字），所以确保传递的参数类型与name属性的类型一致。因此，根据上述分析，我们给出一个完整的实例代码： A页面（跳转页面）： ```vue <template> <button @click="jumpToTab(1)">跳转到B页面的第二个选项卡</button> </template> <script> export default { methods: { jumpToTab(tabIndex) { this.$router.push({ name: 'BPage', // 确保路由配置中有名为'BPage'的路由 query: { activeTab: tabIndex.toString() } // 也可以直接传数字，但query会转为字符串，所以最好在B页面中转换回来 }); } } }; </script> ``` B页面（目标页面）： ```vue <template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="0">内容1</el-tab-pane> <el-tab-pane label="配置管理" name="1">内容2</el-tab-pane> <el-tab-pane label="角色管理" name="2">内容3</el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeName: '0' // 默认激活第一个，注意这里是字符串，因为el-tab-pane的name是字符串 }; }, created() { this.updateActiveTab(); }, watch: { '$route': 'updateActiveTab' }, methods: { updateActiveTab() { const activeTab = this.$route.query.activeTab; if (activeTab !== undefined) { // 因为我们传递的是数字索引，而这里name是字符串，所以我们可以将activeTab转换为字符串，或者将el-tab-pane的name设置为数字 // 这里我们选择转换为字符串，因为query中的activeTab是字符串（即使传递数字也会被转为字符串） this.activeName = activeTab; // 注意：activeTab已经是字符串，所以直接赋值 // 如果el-tab-pane的name是数字类型，那么这里需要转换为数字：this.activeName = Number(activeTab); } } } }; </script> ``` 注意：如果B页面是通过路由的params传递参数，那么在跳转时使用params，获取时使用`this.$route.params.activeTab`。另外，确保你的路由配置正确，B页面的路由需要能够接收query参数（不需要特别配置，query参数是附加在url上的）。引用说明： [^1] 提到了需求效果和背景。 [^2] 提供了一个跳转方法的代码片段。 [^3] 展示了一个路由配置，但并没有直接用于tab跳转。因此，我们主要参考[^2]的方法，并结合[^1]的需求效果，给出上述实现。最后，我们生成相关问题： </think> ### Vue中跳转到指定页面Tab页的实现方法在Vue中实现页面跳转同时定位到目标页面的指定Tab页，主要通过**路由参数传递**和**目标页面参数解析**两个关键步骤完成。以下是具体实现方法： --- #### 方法一：通过Query参数实现（推荐） 1. **在跳转页面（A页面）** 使用`$router.push`传递query参数指定目标Tab： ```javascript methods: { goToTab() { // 跳转到B页面并激活第二个Tab（索引从0开始） this.$router.push({ name: 'PageB', // 目标页面路由名称 query: { tabIndex: 1 } // 传递Tab索引参数 }); } } ``` 2. **在目标页面（B页面）** 获取路由参数并绑定到Tab组件的`v-model`： ```vue <template> <el-tabs v-model="activeTab"> <el-tab-pane label="Tab1" name="0"></el-tab-pane> <el-tab-pane label="Tab2" name="1"></el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeTab: "0" }; // 默认激活第一个Tab }, watch: { // 监听路由参数变化 '$route.query'(newQuery) { if (newQuery.tabIndex) { this.activeTab = String(newQuery.tabIndex); // 转换为字符串（name类型） } } }, mounted() { // 初始化时读取参数 if (this.$route.query.tabIndex) { this.activeTab = String(this.$route.query.tabIndex); } } }; </script> ``` --- #### 方法二：通过Params参数实现 1. **路由配置中添加动态参数** ```javascript // router.js { path: '/pageB/:activeTab?', // 可选参数 name: 'PageB', component: () => import('@/views/PageB.vue') } ``` 2. **跳转时传递参数** ```javascript // A页面 this.$router.push({ name: 'PageB', params: { activeTab: 1 } }); ``` 3. **目标页面获取参数** ```javascript // B页面 mounted() { this.activeTab = this.$route.params.activeTab || "0"; } ``` --- #### 关键注意事项 1. **参数类型转换** Element UI的Tab组件的`v-model`要求`字符串`类型，而路由参数默认是字符串。使用数字索引时需显式转换： ```javascript this.activeTab = String(this.$route.query.tabIndex); ``` 2. **Tab组件兼容性** 不同UI框架的Tab组件激活方式： - **Element UI**：`v-model`绑定`name`值（字符串） - **Ant Design Vue**：`v-model:activeKey`绑定键值（字符串/数字） 3. **路由监听** 必须监听`$route`变化以处理浏览器前进/后退操作： ```javascript watch: { '$route'(to) { if (to.query.tabIndex) { this.activeTab = to.query.tabIndex; } } } ``` --- ### 实现效果说明 - **URL示例**：跳转后URL显示为`/pageB?tabIndex=1` - **用户行为**： 1. 用户点击A页面的跳转按钮 2. 自动打开B页面并直接展示第二个Tab内容 3. 支持浏览器历史记录回溯通过路由参数控制Tab激活状态是Vue中的标准实践，可确保页面状态与URL同步，提升用户体验[^1][^2]。 ---