Vue3—vue-router 常见配置项

一、常见配置项

1.路由重定向

// 路由列表
const routes = [
	{
		path: '/',
		redirect: '/home' // 通过根路由默认跳转home路由
	},
	{
		path: '/home',
		name: 'home',
		component: () => import('../view/home.vue')
	}
]

2. 路由的对应组件静态加载和动态加载

import {createRouter, createWebHashHistory} from 'vue-router';
import test from '../views/test.vue'
// 路由列表
const routes = [
    {
        path: '/',
        name: 'test',
        // 静态加载
        component: test
    },
    {
        path: '/test',
        name: 'test',
        // 动态加载
        component: () => import('../views/test.vue')
    },
]
// 导出路由
export default createRouter({
    history: createWebHashHistory(),
    routes,
})

3. 路由模式切换

// 导出路由
export default createRouter({
    history: createWebHashHistory(),
    routes,
    mode: 'history', // 路由模式：hash 路由有#号， history 没有#号
})

history路由效果：http://localhost:3000/
hash路由效果： http://localhost:3000/#/

4. 设置路由的基础路径

// 导出路由
export default createRouter({
    history: createWebHashHistory(),
    routes,
    // 设置路由基础路径
    base: '/vue3/'
})

路由效果： http://localhost:3000/vue3/#/

5.路由激活时的添加的样式

// 导出路由
export default createRouter({
    history: createWebHashHistory(),
    routes,
    linkActiveClass: 'active', // 路由激活时添加的类名
    linkExactActiveClass: 'cur-active' // 链接被精确匹配激活时添加的类名
})

<template>
<router-link to="/promotionApply">promotionApply</router-link>
<router-link to="/inspectorApply">inspectorApply</router-link>
</template>

6. 路由跳转时滚动条的位置

// 导出路由
export default createRouter({
    history: createWebHashHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) { // 路由跳转时滚动条位置
        if (savedPosition) { // 有保存位置
            return savedPosition
        } else {
            return {x: 0, y: 0}
        }
    }
})

7. 路由参数解析和字符串化

// 导出路由
export default createRouter({
    history: createWebHashHistory(),
    routes,
    // 路由参数解析和字符串化, 路由?号后面的参数转换，通常会自动转换，也可以自定义转换
    parseQuery (query) {

    },
    // 路由参数解析和字符串化
    stringifyQuery(obj) {

    }
})

8. 当路由不支持history模式时，自动切换回hash模式

// 导出路由
export default createRouter({
    history: createWebHashHistory(),
    routes,
    fallback: true // 当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
})