vue3 setup router的使用教程

setup中没有this,所以我们需要引入vue-router的实例，然后通过实例来操作路由。

操作和之前有一些差异，所以这里记录一下。

1. 安装

npm install vue-router

2. 使用（创建路由实例）

import { createRouter, createWebHistory } from 'vue-router'
const routes = [{path: '/',name: 'Home',component: Home}]
const router = createRouter({/*** 这里可以配置路由模式* * @description 1. hash模式@example import { createRouter, createWebHashHistory } from 'vue-router'history: createWebHashHistory(),* @description 2. history模式* 如下：*/history: createWebHistory(),routes,
})
export default router

3. 路由跳转

请先引入router实例，接下来的操作都是基于我们创建的router实例。

import router from './router'

3.1 通过router-link标签跳转

<router-link to="/">Home</router-link>

3.2 通过js代码跳转

import router from './router'// 通过query传参
router.push({path: '/about',query: {id: 1}
})
// 通过params传参
router.push({path: '/about',params: {id: 1}
})// 或者
router.push('/about?id=1')

4. 接收参数

4.1 通过query接收参数

import router from './router'
onMounted(() => {console.log(router.currentRoute.value.query.id)
})

4.2 通过params接收参数

import router from './router'
onMounted(() => {console.log(router.currentRoute.value.params.id)
})

5. 路由守卫

5.1 全局守卫

import router from './router'
router.beforeEach((to, from, next) => {// to: 即将要进入的目标 路由对象// from: 当前导航正要离开的路由// next: 调用该方法后，才能进入下一个钩子next()
})

5.2 路由独享守卫

const routes = [{path: '/',name: 'Home',component: Home,beforeEnter: (to, from, next) => {next()}}]

5.3 组件内守卫

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteLeave((to, from, next) => {console.log(to, from)next()
})
onBeforeRouteUpdate((to, from, next) => {console.log(to, from)next()
})

6. 路由懒加载

const routes = [{path: '/',name: 'Home',component: () => import('../views/Home.vue')}]

7. 路由嵌套

const routes = [{path: '/',name: 'Home',component: Home,children: [{path: 'about',name: 'About',component: () => import('../views/About.vue')}]}]

8. 路由别名

const routes = [{path: '/',name: 'Home',component: Home,alias: '/home'}]

9. 路由重定向

const routes = [{path: '/',name: 'Home',component: Home,redirect: '/home'}]

10. 路由滚动行为

const router = createRouter({history: createWebHistory(),routes,scrollBehavior(to, from, savedPosition) {// to: 即将要进入的目标 路由对象// from: 当前导航正要离开的路由// savedPosition: 滚动条的坐标return {x: 0,y: 0}}
})

11. 获取所有路由

import router from '@/router';
console.log(router.options.routes)

12. 获取当前路由

import router from '@/router';
console.log(router.currentRoute.value)