vue页面（vue页面传值的方法）

本篇文章给大家谈谈vue页面，以及vue页面传值的方法对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue的多页面配置
• 2、VUE实现页面滚动加载
• 3、Vue多页面应用配置
• 4、vue 刷新页面的三种方法
• 5、vue中的页面刷新问题
• 6、Vue 页面间传值

vue的多页面配置

如何使用项目

项目改造过程

可以通过/sign,/test访问页唤塌面 7. 上面这种模式打包上线的时候需要后台的配置，(比如打包后的文件都在build文件夹下),nginx配置如下

server {

listen 3088;

server_name localhost;

#charset koi8-r;

#access_log /var/log/nginx/host.access.log main;

root /usr/share/nginx/html/build;

index index.html index.htm;

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html

#

error_page 500 502 503 504 /50x.html;

location = /逗中50x.html {

root /usr/share/nginx/html;

}

location /sign {

try_files $uri $uri/ /sign.html;

}

location /test {

try_files $uri $uri/山链山 /test.html;

}

}

上面的配置就能直接访问,这样整体的多页面配置就完成了。

通过node启动一个服务器来渲染多个html页面

VUE实现页面滚动加载

vm = new Vue({

        el: '#app',

        data: {

            items:[],

            finished:false,

            loading:false

        },

        mounted:function(){

                window.addEventListener('scroll',this.handleScroll,true);

          },

         created: function () {

             var that = this;

             that.isApp = Utils.isAppTop();

         袜陆    that.getHouseList(); // 获取房源列表

         },

computed: {

     last_id: function(){

    var $this = this;

            var lastId = 0;

            $.each($this.houseList,function (index,value) {

                lastId = value.zf_id;

            });

            return lastId;

    }

    },

methods: {

        handleScroll:function(e){

        var $this = this;

        console.log('handleScroll')

        if ($this.getBottomOfWindow()) {

          $this.getHouseList();

        }

    },

    getBottomOfWindow:function () {

            var viewH =$("#g-scrollview").height();//可见高度

            var contentH =$("#g-scrollview").get(0).scrollHeight;//内容高度

            var scrollTop =$("#g-scrollview").scrollTop();//滚动高度

            return viewH + scrollTop + 200 = contentH;

        },

            getHouseList: function(){

                var $this = this;

                console.log('getHouseList')

                console.log($this.finished)

                if($this.finished){

                return false;

                }

                if($this.loading){

                return;

                }

                $this.loading = true;

                $.ajax({

                    url: api

                    data: {

                            last_id:$this.last_id

                    },

                 粗好胡   dataType: 'json',

                    method: 'GET',

                   岩拦 success: function (res) {

                        var houseList = $this.houseList;

                        if (res.error_code == 0) {

                            var count = 0;

                            $.each(res.data,function (index,value) {

                                houseList.push(value);

                                count++;

                            });

                            console.log(houseList)

                            $this.houseList = houseList;

                            $this.$forceUpdate();

                            if (count == 0) {

                                $this.finished = true;

                            }

                            $this.loading = false;

                        }

                        YDUI.dialog.loading.close();

                    },

                    error: function () {

                    $this.loading = false;

                    YDUI.dialog.loading.close();

                    }

                });

            },

}

Vue多页面应用配置

最近由于工作驱动，项目包含pc端及mobile端，pc端和mobile端核心功能一致，最大的不同是UI,为了减少维护的成本，决定使用Vue的多页面开发。

项目线上部署在一个子目茄桐录下，为了解决在本地和线上路径保持一致，需要修改一些配置。所以以此篇文章来记录一下配置过程中的问题。

这里是我放在github上的项目，里面有整个配置文件。感兴趣的颤闭坦朋友可以参考一下： vue-multiple-page

此篇文章记录了先在根路径下的多页面配置，再从根路径修改成子路径的配置

vue脚手架vue-cli3及以上；

在本地用vue-cli新建一个项目；

vue3.js :路由配置修改的是 history: createWebHistory('/mobile/')

vue3.js :路由配置修改的是 history: createWebHistory('/e/')

mobile端mobile.js的base修改成 base: '/e/mobile'

vue3.js :路由配置修改的是 history: createWebHistory('/e/mobile')

特别注意的地态闭方

vue 刷新页面的三种方法

相当于按陪猛ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好

（1）新建一个空白页面 reload.vue：

（2）需要刷新的页面，先跳转到reload.vue，再跳转回原页面，从而实现刷新（扒乱弯路径上带param的不能用）：

（1）App.vue添加provide，和data一春闷样，返回一个对象：

（2）需要刷新的页面内注入inject依赖：

vue中的页面刷新问题

1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验感贼不好

3.provide / inject 组合

作用：允许一个祖先组件世基向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下轿祥游关系成立的时间里始终生效。

App.vue:

声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

4.provide / inject 用法

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的搜帆谨对象，那么其对象的属性还是可响应的。

[img]

Vue 页面间传值

传值是最好将字典，数组类型的 转成json字符串比较好

JSON.stringify(item)

然后到下一个页面 的mounted()函数中取值

如果在微信中 下面有 - - 前进返回 箭头 就要用 name 这种方式push 下一个页面是可以到下一个页面，但是单按右箭头返回时是返回不到先前界面的

因为它记录的是页面路劲，所以如果想要实现含哗可以返回的界面切换最好要用 path 路径来push

//本地存

//用的时候取

还有一个 sessionStorage 缓存传值 和 localStorage的操作类似

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

WebStorage的好橘优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取谈袜行，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

（6）WebStorage提供了一些方法，数据操作比cookie方便；

setItem (key, value) —— 保存数据，以键值对的方式储存信息。

getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。

removeItem (key) —— 删除单个数据，根据键值移除对应的信息。

clear () —— 删除所有的数据

key (index) —— 获取某个索引的key

关于vue页面和vue页面传值的方法的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。