vue.js之rouer配置项简介

快来打我* 2022-05-14 12:52 250阅读 0赞

router.js :

import Router from 'vue-router'
    import routers from './routers'
    
    export default () => {
        return new Router({
            routers,
    
            // mode默认值为'hash',改为'history'后可去掉路由上的#
            mode: 'history',
    
    
            // 在该项目下所有应用通过vue-router的pai跳转的url上加一个/base/
            // 如 http://localhost:8080/login =>  http://localhost:8080/base/login 
            // 非强制性，即 手动输入的url是否带上/base/都不影响路由跳转
            base: '/base/',
    
    
            // 这两个配置项的作用是：在路由跳转的a标签(router-link内部实现用的是a标签)的class上增加这里配置的值，比如 我们可以写一些全局class来指定链接被激活的时候应该显示什么样的样式
            // linkActioveClass与linkExactActiveClass区别：当前所处的路径下是'linkActioveClass linkExactActiveClass'，非当前路径是'linkActioveClass'
            linkActiveClass: 'active-link',
            linkExactActiveClass: 'exact-active-link',
    
    
    
            // 用于设置 路由跳转后是否保存当前页面滚动条的位置
            scrollBehavior (to, from ,savedPosition) {
                // to：即将跳转的路由对象
                // from：当前路由的对象
                // savedPosition：当前页面滚动条的位置对象 
                if (savedPosition) {
                    return savedPosition
                } else {
                    return { x: 0, y: 0}
                } 
            }
    
    
            // 用于自定义对路由上的参数进行转换时的操作
            // 即 http://localhost:8080/login?id=123&type=str 的参数('id=123&type=str')自定义处理方式(覆盖默认的处理方式)
            parseQuery () {},
            stringfyQuery () {} ,
    
    
            // 默认为true，当设置为false时，是针对少数不支持history这种前端路由方式的浏览器时fallback为hash的模式，此时单页应用就变成多页应用
            fallback: true
        })
    }