在vue3.0中使用router时，总是报$router未被定义，这个怎么解决

<template>
    <div class="dinner-left">
        <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose" background-color="transparent" text-color="#ffffff" active-text-color="#FFFAFA">
            <el-sub-menu index="1">
                <!-- 一级菜单 -->
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>系统设置</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item index="1-1">item one</el-menu-item>
                
            </el-sub-menu>
            
        </el-menu>
    </div>
</template>
<script>
    import {
        ref
    } from 'vue'
    import {
        Location,
    
    } from '@element-plus/icons-vue'
    export default {
        name: 'lelemenu',
        components: {
            Location,
        },
        setup(props,{root}) {
            const isCollapse = ref(false)
            console.log(root.$router)
            return {
                isCollapse,
            
            }
        }
    }
</script>
<style>
    .dinner-left {
        width: 200px;
        background-color: #344a5f;
        color: #FFFFFF;
        position: absolute;
        margin-left: 0px;
        top: 50px;
        bottom: 0px;
    }
</style>

这是哪个菜单的页面，下面的是main.js，引用了router，也配置了

```javascript
import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(store).use(ElementPlus).use(router).mount('#app')

router中的index.js如下

```javascript
import {
    createRouter,
    createWebHistory
} from 'vue-router'
const routes = [{
    path: '/',
    name: 'Login',
    component: () => import( /* webpackChunkName: "about" */ '../views/login/Login.vue')
}, {
    path: '/home',
    name: 'Home',
    redirect: 'homeIndex',
    component: () => import( /* webpackChunkName: "about" */ '../views/home/index.vue'),
    children: [
        {
        path: '/homeIndex',
        name: 'HomeIndex',
        component: () => import( /* webpackChunkName: "about" */ '../views/home/HomeIndex.vue')
        },
    ]
}, {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
}]
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})
router.beforeEach((to, from) => {
    const token = sessionStorage.getItem("token")
    if (to.fullPath != '/') {
        console.log(from)
        if (token === null || token === '') {
            to.fullPath = "/"
        }
    }
    return true;
})
export default router

总是报错：

这是我哪里配置的不对吗，请指教

参考下下面这篇文章
https://blog.csdn.net/TianQiWanLaiQiu/article/details/120039272?utm_medium=distribute.wap_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-120039272.wap_agg_so&utm_term=setupvue3%E4%B8%AD%E4%BD%BF%E7%94%A8router

直接使用之前vue2.x的this.$rotuer.push()不好用, rotuer不被识别,
解决:
script中导入这行import { useRouter } from 'vue-router';
setup中导入 const router = useRouter();
然后在按钮方法中添加router.push('/');加上你要跳转的路径即可