vue.js之rouer配置项简介

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