vue3路由的两种引入方式useRouter和router进行页面跳转

当我在写vue3的路由跳转的时候发现都是推荐以下写法

方法一：

import { useRouter } from 'vue-router'
const router_useRouter = useRouter()
router.push('/pathName')

但是以下写法也是可以的

方法二：

import router from '@/router'
router.push('/pathName')

然后我就对router和router_useRouter进行比较，发现这两个变量是相等的

import { useRouter } from 'vue-router'
import router from '@/router'
const router_useRouter = useRouter()
console.log('router===router_useRouter :>> ', router === router_useRouter)

输出结果为

其中src-router-index.ts文件内容如下

import { login_token } from '@/global/constance.'
import { localCache } from '@/utils/cache'
import { createRouter, createWebHashHistory } from 'vue-router'
// 获取用户可登录的url地址

const router = createRouter({
  history: createWebHashHistory(),
  //映射关系：path=>component
  routes: [
    {
      path: '/',
      redirect: '/main'
    },
    {
      path: '/login',
      component: () => import('../view/login/Login.vue')
    },
    {
      path: '/main',
      component: () => import('../view/main/Main.vue'),
      children: [
      ]
    },
    {
      path: '/:pathMatch(.*)',
      component: () => import('../view/not-found/NotFound.vue')
    }
  ]
})
//导航守卫
router.beforeEach((to) => {
  const token = localCache.getCache(login_token)
  // if (to.path.startsWith('main') && !token)如果登录后里面所有的页面都是main开头页可以这样写
  if (to.path !== '/login' && !token) return '/login'
})
export default router

以上两种方式都可以实现跳转，但是看网上的都是写的方法一，有没有朋友讲下两个方法是不是都可以啊