1、创建路由

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

  • 路由模式有两种,一种是 createWebHashHistory哈希模式,一种是createWebHistory,这两种分别对应 Vue2.x 中的hashhistory;
  • 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')

如果想在页面或者组件中访问路由对象,可以通过 useRouteruseRoute来获取;

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

前往低代码交流专区

更多推荐