vue2使用composition-api的情况下想使用route

vue2的项目,使用了@vue/composition-api组合式api,在其他的js文件中想使用$route.query

import { ref, watch, computed } from '@vue/composition-api'
// 引入
import Router from '@/router'

// 使用
const value = Router.app.$route.query.value

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 中实现类似于 Vue-Element-Admin 中的标签页面效果,可以按照以下步骤进行: 1. 创建一个 `Layout` 组件,用于包含页面内容和标签页组件。 2. 在 `Layout` 组件中,使用 `router-view` 标签来渲染当前路由对应的组件。 3. 创建一个 `TagsView` 组件,用于显示标签页列表,并提供添加、删除等操作。 4. 在 `TagsView` 组件中,监听路由的变化,根据当前路由动态添加标签页。 5. 在 `TagsView` 组件中,提供标签页的删除操作,点击标签页时切换路由。 具体实现可以参考以下代码: ```vue // Layout.vue <template> <div class="layout"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content"> <router-view></router-view> </div> <TagsView></TagsView> </div> </template> <script> import TagsView from './TagsView.vue' export default { name: 'Layout', components: { TagsView, }, } </script> <style> /* 样式省略 */ </style> ``` ```vue // TagsView.vue <template> <div class="tags-view"> <div class="tags"> <div v-for="(tag, index) in visitedViews" :key="tag.path" class="tag" :class="{ active: activeIndex === index }" @click="handleTagClick(index)" > {{ tag.meta.title }} <span class="close" @click.stop="handleTagClose(index)">x</span> </div> </div> </div> </template> <script> import { computed, defineComponent } from 'vue' import { useRoute, useRouter } from 'vue-router' export default defineComponent({ name: 'TagsView', setup() { const router = useRouter() const route = useRoute() // 访问过的页面 const visitedViews = computed(() => router.getMatchedComponents().map(({ meta, ...rest }) => ({ meta, ...rest, })), ) // 当前激活的页面索引 const activeIndex = computed(() => visitedViews.value.findIndex((view) => view.path === route.path), ) // 标签页点击事件 const handleTagClick = (index) => { const path = visitedViews.value[index].path router.push(path) } // 标签页关闭事件 const handleTagClose = (index) => { const path = visitedViews.value[index].path router.push('/') router.replace(path) } return { visitedViews, activeIndex, handleTagClick, handleTagClose, } }, }) </script> <style> /* 样式省略 */ </style> ``` 在以上代码中,我们使用Vue3 的 Composition API,通过 `computed` 创建计算属性,通过 `defineComponent` 创建组件。使用了`useRouter`和`useRoute`两个方法可以获取到当前路由信息。在 `TagsView` 组件中,我们监听了路由的变化,动态添加标签页,并提供了标签页的删除和切换操作。同时,我们在 `Layout` 组件中使用 `router-view` 标签来渲染当前路由对应的组件,实现了类似于 Vue-Element-Admin 中的标签页面效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值