• Vue 路由懒加载


    index.js

    import VueRouter from "vue-router";
    import UserSettings from "./UserSettings";
    // import UserEmailsSubscriptions from "./UserEmailsSubscriptions";
    const UserEmailsSubscriptions = () => import (/* webpackChunkName: "group-userEmails" */ './UserEmailsSubscriptions.vue');
    const UserProfile = () => import (/* webpackChunkName: "gpUserProfile" */ './UserProfile.vue');
    const UserProfilePreview = () => import(/*webpackChunkName:"gpUserProfile"*/'./UserProfilePreview.vue');
    
    
    function dynamicPropsFn(route) {
        const now = new Date()
        return {
            name: (now.getFullYear() + parseInt(route.params.years)) + '!'
        }
    }
    
    const routes = [
        {
            path: '/user/settings/:years',
            props: dynamicPropsFn,
            // You could also have named views at tho top
            component: UserSettings,
            children: [
                {
                    path: 'emails',
                    name: 'emails',
                    component: UserEmailsSubscriptions,
                    meta: {requireAuth: true},
                },
                {
                    path: 'profile',
                    name: 'profile',
                    //此路由對應包含了兩個Vue視圖組件
                    components: {
                        default: UserProfile,
                        helper: UserProfilePreview
                    },
                }]
        }
    ];
    
    const router = new VueRouter({
        mode: 'history',
        routes,
        //https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8#滚动行为
        // 当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:
        //scrollBehavior 方法接收 to 和 from 路由对象。
        //第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用
        //这个方法返回滚动位置的对象信息,长这样:
        //  { x: number, y: number }
        // { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)
        // 如果返回一个 falsy (译者注:falsy 不是 false,参考这里)的值,或者是一个空对象,那么不会发生滚动。
        // scrollBehavior(to, from, savedPosition) {
        //     // return 期望滚动到哪个的位置
        //     return {x: 0, y: 100};
        //
        //
        // },
    
        //对于所有路由导航,简单地让页面滚动到顶部。
        //
        // 返回 savedPosition,在按下 后退/前进 按钮时,就会像浏览器的原生表现那样:
        // scrollBehavior(to, from, savedPosition) {
        //     if (savedPosition) {
        //         return savedPosition
        //     } else {
        //         return {x: 0, y: 0}
        //     }
        // }
    
        // 如果你要模拟“滚动到锚点”的行为:
    
        // scrollBehavior(to, from, savedPosition) {
        //     if (to.hash) {
        //         return {
        //             selector: to.hash
        //         }
        //     }
        // }
    
    
        // 我们还可以利用路由元信息更细颗粒度地控制滚动。查看完整例子请移步这里:
        // https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js
    
    
        // 异步滚动
        // 你也可以返回一个 Promise 来得出预期的位置描述:
        //将其挂载到从页面级别的过渡组件的事件上,令其滚动行为和页面过渡一起良好运行是可能的。
        // 但是考虑到用例的多样性和复杂性,我们仅提供这个原始的接口,以支持不同用户场景的具体实现。
        // scrollBehavior(to, from, savedPosition) {
        //     return new Promise((resolve, reject) => {
        //         setTimeout(() => {
        //             resolve({x: 0, y: 0})
        //         }, 500)
        //     })
        // }
    
    });
    
    
    export default router;
    
    

    效果:

    vue.test lazyloading

  • 相关阅读:
    合并链表
    ImportError: cannot import name 'GMM' from 'sklearn.mixture'
    SyntaxError: invalid character in identifier
    在 jupyter notebook 中插入图片
    Atom 换行后删除前面空格,需要按2/4次退格键
    win10输入法InpuMode默认显示中文
    Visual Studio(WindowsSDK.targets(46,5): error MSB8036: 找不到 Windows SDK 版本8.1)
    atom修改注释的字体,字号,颜色
    '__int64' has not been declared
    VMware 打开虚拟机库
  • 原文地址:https://www.cnblogs.com/dzkjz/p/12752169.html
Copyright © 2020-2023  润新知