Vue3 中路由的使用

1、创建路由

Vue3中路由和 Vue2.x中的路由差不多，在 Vue3中创建路由有几点需要注意：

• 路由模式有两种，一种是 createWebHashHistory哈希模式，一种是createWebHistory，这两种分别对应 Vue2.x 中的hash和 history;
• Vue2.x 创建路由是通过 new VueRouter()来创建，Vue3 是由 createRouter创建；

// vue3.x
import { createRouter } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})
// vue2.x
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
    mode: 'history',
    routes
})

定义好路由之后，需要在主入口文件 main.js中注册路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')

如果想在页面或者组件中访问路由对象，可以通过 useRouter和 useRoute来获取；

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
console.log(useRouter) // 相当于 Vue2.x 中的 this.$router
console.log(useRoute) // 相当于 Vue2.x 中的 this.$route
</script>

2、路由传参

• 动态传值

// 路由文件
const routes = [
    {
        path: '/home/:id',
        // 路由懒加载
        component: () => import('@/views/home.vue'),
        meta: {
            name: '首页'
        }
    }
]

• 编程式导航

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
// 方式一: 直接写路由地址
router.push('/home')
// 方式二：带有路径的对象
router.push({ path: '/home' })
// 方式三：命名路由带参数, params 需要和 name 搭配，不能和 path 搭配，否则会无效
router.push({ name: 'home', params: { id: 1 } })
// 方式四：带查询参数
router.push({ path: '/home', params: { id: 1 } })
router.push({ path: '/home', query: { id: 1 } })
// 方式五：带 hash, 表示为 /home#hash
router.push({ path: '/home', hash: 'hash' })
</script>

• 声明式导航

<!-- 方式一 -->
<router-link to="/home">Home</router-link>
<!-- 方式二：path 路径 -->
<router-link :to="{ path: '/home' }">Home</router-link>
<!-- 方式三：需要在路由对象中定义 name 值 -->
<router-link :to="{ name: 'home' }">Home</router-link>

3、路由切换滚动到顶部

在 Vue3中有两种方式可以在我们切换路由时将页面滚动条滚动到顶部，分别是路由守卫钩子 afterEach和创建路由时设置 scrollBehavior方法；

路由守卫钩子 afterEach

router.afterEach((to, from, next) => {
    window.scrollTo(0, 0)
})

设置 scrollBehavior 方法

const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savePosition) {
        return {
            top: 0
        }
    }
})