Vue Router 数据获取

Siona

Vue Router 数据获取

导航完成后获取数据

组合式 API

<template>
    <div class="content">
        {{$route.query.id}}
    </div>
</template>
<script setup>
    import { useRoute } from 'vue-router'

    const route = useRoute()
    const roleId = route.query.id
</script>

选项式 API

<template>
    <div class="content">
        {{$route.query.id}}
    </div>
</template>
<script>
    import { useRoute } from 'vue-router'

    export default {
        setup() {
            // 注意，OptionsAPI 必须要在 setup 中定义 route
            const route = useRoute()
            const roleId = route.query.id
        }   
    }
</script>

需要导航的组件

<script setup>
    const configurePermission = (id) => {
        router.push({ name: 'ConfigurePermission', query: { id } })
    }
</script>

import BasicLayout from '@/layouts/SystemBasicLayout'

export const SystemRouter = [
    {
        path: '/system',
        meta: { title: '系统管理主页' },
        component: BasicLayout,
        redirect: '/system/home',
        children: [
            {
                name: 'ConfigurePermission',
                path: '/system/configurePermission',
                component: () => import('@/views/system/ConfigurePermission.vue'),
                meta: { title: '配置权限' }
            }
        ]
    }
]

Vue Router 数据获取

Vue Router 数据获取

导航完成后获取数据

目录