vue3路由的两种引入方式useRouter和router进行页面跳转
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
以上两种方式都可以实现跳转,但是看网上的都是写的方法一,有没有朋友讲下两个方法是不是都可以啊
更多推荐
已为社区贡献1条内容
所有评论(0)