vue3 setup router的使用教程

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)