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
}
}
})