Vue3+Ts+Setup：路由跳转和传参手册

Vue3+Ts+Setup：路由跳转和传参的最佳实践

使用组件实现路由跳转

在 Vue3 中，我们可以通过组件实现页面的跳转。组件内部，路由跳转的具体实现是通过 router-link 或 router.push() 方法来完成的。其中，router-link 会把新的 URL 添加到历史记录中，而 router.push() 不会。

// router-link
<router-link to="/about">关于</router-link>

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

使用 useRouter() 和 useRoute() API

Vue3+Ts+Setup 也提供了丰富的 API 来实现路由跳转，其中最常用的是 useRouter() 和 useRoute():

• useRouter() 返回一个路由对象，它提供了 push(), replace(), go() 等方法来实现路由跳转。
• useRoute() 返回一个当前路由信息的对象，它提供了 path, query, params 等属性来访问路由信息。

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

// useRoute()
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.path) // 输出当前路由的路径

参数传递

在 Vue3+Ts+Setup 中，传参的方式主要有两种：通过 to 属性和 params 对象：

• to 属性适合传递一些简单的参数，例如：<router-link to="/about/id=1">。
• params 对象适合传递一些复杂的参数，比如对象或数组，例如：<router-link :to="{ name: 'about', params: { id: 1 } }">。

最佳实践

路由跳转：

• 尽量使用组件来实现路由跳转，而不是直接使用 <a> 标签。
• 使用 useRouter() 和 useRoute() 来访问路由对象和路由信息，而不是直接使用 this.$router 和 this.$route。

参数传递：

• 使用 to 属性和 params 对象来传递参数，而不是直接在 URL 中传递参数。

其他最佳实践：

• 使用 router.beforeEach() 来保护路由，防止未经授权的用户访问某些页面。
• 使用 router.meta 来存储一些与路由相关的信息，如页面标题、页面权限等。

常见问题解答

1. 如何在 Vue3 中使用嵌套路由？

// App.vue
<template>
  <RouterView />
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'
import About from './About.vue'
import Home from './Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About,
      children: [
        {
          path: 'nested',
          component: Nested
        }
      ]
    }
  ]
})

export default router
</script>

// Nested.vue
<template>
  <h1>Nested Route</h1>
</template>

<script>
export default {
  name: 'Nested'
}
</script>

2. 如何在 Vue3 中传递查询参数？

// router-link
<router-link to="/about?id=1">关于</router-link>

// router.push()
router.push({
  path: '/about',
  query: {
    id: 1
  }
})

3. 如何在 Vue3 中获取路由参数？

// useRoute()
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id) // 输出路由参数

4. 如何在 Vue3 中监听路由变化？

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    router.beforeEach((to, from, next) => {
      // 在路由跳转之前执行
    })
    
    router.afterEach((to, from) => {
      // 在路由跳转之后执行
    })
  }
}

5. 如何在 Vue3 中阻止路由跳转？

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    router.beforeEach((to, from, next) => {
      if (条件不满足) {
        // 阻止路由跳转
        next(false)
      } else {
        // 允许路由跳转
        next()
      }
    })
  }
}