关于vue的页面跳转后,如何每次进入页面时都能获取后台数据。 5C

1.为了使vue页面,每次进入页面时都能从后台获取数据,选择了监听路由的变化,当路由发生变化且是跳转到本页面时,调用请求后台获取数据。

2.问题:上面的逻辑看似没有问题,但是总是报错。

3.代码如下:

data:function(){
          return{
            infoLoss:[],
                         relationRemain:[]
                        }},


watch:{
        '$route'(to,from){
          debugger
          const that=this
          if(to.path=='/charts'){
            debugger
            that. getInfoLoss()
            that.getARs()
          }
          console.log(to.path);
        }
      },
 methods: {
          getInfoLoss(){
            debugger
            let that=this
            Vue.http.post('http://localhost:8080/ASGLS/getInfoLoss').then((res) => {
              debugger
              that.infoLoss=[
                {name:'GAACP',value:res.body[0]},
                {name:'ASGLS',value:res.body[1]},
                {name:'Slicing',value:res.body[2]}
              ]

            })
          },
       getARs(){
          let that=this
          Vue.http.post('http://localhost:8080/ASGLS/getAR').then((res) => {
            debugger
            that.relationRemain=[
              {name:'GAACP',value:res.body[0]},
              {name:'ASGLS',value:res.body[1]},
              {name:'Slicing',value:res.body[2]}
            ]

          })
        }

4:报错:图片说明

3个回答

u010603891
岁月抹平了我的小脾气 感谢你的回答,你的在生命周期钩子中调用不行,这样调用只有再首次页面加载时会执行,但再次从其他页面跳过来的时候就不会再执行了
6 个月之前 回复
u010603891
岁月抹平了我的小脾气 感谢你的回答,你的在生命周期钩子中调用不行,这样调用只有再首次页面加载时会执行,但再次从其他页面跳过来的时候就不会再执行了
6 个月之前 回复

你直接在该页面的created,或者mounted里面写获取后台的ajax就行,

mounted(){
    this.getInfoLoss();
    this.getARs();
}
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于vue的页面跳转后,如何每次进入页面时都能获取后台数据
首先说问题。 一.页面的数据来自后台,即会发起请求从后台取值。 二.子组件的数据刷新的问题,即每次进入父组件的时候,其相关子组件的数据需要重新从后台取值。 1.答: 关于第一个问题。一般来讲我们会在vue的created的生命周期中实现,向后台发起请求获取数据。 但是这样会带来一个问题。 1.1.我需要每次进入页面的时候都从后台获取数据! 而created事件很明显是不能实现的。 ...
vue 页面跳转,传数据
出数据页面exchange(){ this.$router.push({path:'/shoppingconfirm',query: { mall_id: this.mallres.mall_id , name:this.mallres.name,
Vue页面跳转保留数据
直接上代码 const router = new VueRouter({ // 2. 定义路由 routes:[{ path: '/cashier', component: Page1, meta: { keepAlive: true // 需要被缓存 } },{ path: '/Page2', co...
vue 进入页面获取input 焦点
移动端搜索页面 进入页面后,获取到 input 的焦点, 才能弹出键盘 使用H5属性值可以获取到焦点 <input v-model="keyWord" class="search-inp-item" type="text" autofocus="autofocus"/> 但是,第一次进入可以, 返回再次进入就不能获取到焦点了 使用官方的解决方法 在main.js中加上 ...
vue进入页面时滚动条始终在底部
mounted () { this.scrollToBottom(); }, //每次页面渲染完之后滚动条在最底部 updated:function(){ this.scrollToBottom(); }, methods:{ scrollToBottom: function () { this.$nextTick(() => { var contain...
在后台(aspx.cs)页面实现页面跳转
实现的功能就是,当完成一项功能后,最好是返回到上一级页面,防止停留在当前页面出现问题,一般可以在前台使用js实现页面跳转,但是如果功能都是在后台完成时,直接在后台完成页面跳转,比较省事,就不用将指令传递到前台交给js完成。   base.Response.Redirect("Project_Manager.aspx", true); //使用的就是Redirect()方法,第一个参数是跳转到的
asp页面后台页面跳转实例
protected void Button3_Click(object sender, EventArgs e)     {         string q_guided = "";         if (Request.QueryString["guideid"] != null)         {             q_guided = Request.QueryStri
vue Iview 后台页面
vue Iview 搭建的后台页面 1. 自定义主题index.less 2. 国际化VUE18n 3. 动态菜单 4.自定义组件 5.组件联动 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report
vue 简单模拟 后台数据渲染页面
1.实例 <div id="app"> <div class="student" style="width: 80%;margin: 0 auto;"> <ul style="list-style: none; text-decoration: none;"> <li v-for="person in persons" style="wid...
vue怎么实现后台数据渲染到页面
rn rn rn rn rn rn rn rn rn rn---------分割线---------rn上面这是后台写好的接口rn---------分割线---------rnimport examsubject from "@/service/auth/ExaminationManagement/examinationSubject";rnimport moment from 'moment';rn--------分割线----------rn这是导入后台的路由rn--------分割线----------rn// 输出已选择的table数据rn handleSelectionChange(val) rn this.multipleSelection = val;rn ,rn //展示当前显示条数rn handleSizeChange(val) rn this.size = val;rn examsubject.findAll(size:this.size,(data) => rn this.TableData = data.data;rn )rn ,rn //展示当前显示的页数rn handleCurrentChange(val) rn this.page = val;rn examsubject.findAll(size:this.size,page:this.page,(data) => rn this.TableData = data.data;rn this.total = data.total;rn )rn ,rn //模态框没有做任何操作就关闭时刷新tablern handleClose()rn this.handleCurrentChange();rn this.dialogVisible = false;rn ,rn loadData()rn examsubject.findAll((data) => rn console.log(data)rn this.TableData = data.data;rn this.total = data.total;rn )rn ,rn ----------分割线-----------rn这是实行find All方法rn-----------分割线----------rn但是后台的数量已经娶到了,唯独没有显示数据记录,就几个数据的表格,怎么才可以将后台的数据渲染进来?
Vue页面跳转时传参总结
1 路由跳转     <router-link   to="/login">     <router-link/>        跳转到 path:'/login' 的页面 2  路由跳转时传参       2.1   传参的页面<template>中  :    <router-link :to="'/home/newsinfo/' + ite...
如何获取后台页面参数
[code=javascript] aspxhttp = new XMLHttpRequest();rnaspxhttp.open("POST", "zouye.aspx/em", true);rn aspxhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");rn aspxhttp.send();[/code]rn在后台zuoye.cs文件中代码为[code=csharp] public string[,] em()rn rn string[,] employee=new string[2,4];rn employee[0,0] = "aspx于";rn employee[0, 1] = "14";rn employee[0, 2] = "F";rn employee[0, 3] = "1.jpg";rn employee[1, 0] = "aspx王";rn employee[1, 1] = "15";rn employee[1, 2] = "F";rn employee[1, 3] = "1.jpg";rn return employee;rnrn [/code]rn我在前台怎么获取这个返回的数组呢?
vue页面加载时调用接口获取后台数据
vue页面加载时调用接口获取后台数据 <template> <div class="hello"> <div> {{title}} </div> <hr> <button @click="convert">点击获取数据</button> </div> ...
vue axios发送请求时,后台保存了session,获取不到数据
把默认配置withCredentials改为true,就可以允许跨域携带session信息了 axios.defaults.withCredentials=true; 这样每次发送ajax请求后,只要不关闭浏览器,得到的session数据都是一致的。 ...
页面如何获取表单提交后返回的数据
$("#loginForm").submit(function()n $("#msg").text("");n var bool = true;n $(".input").each(function() n var inputName = $(this).attr("name");n if(!invokeValidateFunction(inputName)) n bool = false;n n );n return bool;n );n用户名和密码数据正确后 会调用后台的servlet servlet会返回一个bol值 我前台怎么获取这个值呢?
页面跳转时后台需要什么
假设我有一个介绍各个国家的网站,在我的首页上有二十个国家名称,每个国家都是可以点击的。rnrn我想要的效果很简单:用户点击某个国家后,跳转到一个新页面上,新页面上的内容是关于这个国家的介绍。rnrnrn我现在就是不清楚这个跳转过程,前端和后端是如何配合工作的。rnrn比如我的首页是:www.mysite.comrn当用户点击China后,我希望用一个新的网页:www.mysite.com/China 来呈现关于China的介绍。rnrn但是呢,我不想针对每个国家都做一个html网页,因为在后端的数据库中,所有国家的信息都是在一个表里的,因此每个国家的介绍内容的结构是一样的。rnrn我希望可以达到这样的效果:我的前端只做一个页面,然后这个页面的内容根据用户点击的不同国家而呈现出不同国家的介绍。rnrnrn请问这可以实现吗?如果可以,我的后端应该做哪些事情呢?rn难道是前端设计一个页面框架,然后后端把数据库里找到的数据转换成字符串格式嵌入到页面中?
Vue脚手架,通过api获取后台数据
情况:api项目,vue项目都在本机运行,vue通过调用接口,获取数据 问题难点:牵涉到跨域问题 vue代码:点击按钮调用regist方法,获取http://192.168.1.233/api/bargain/list数据 methods: { regist:function() { //this.$http.get("http://192.168.1.233/api/regi...
silverlight页面跳转后如何销毁原来的页面
我用silverlight做了页面跳转的一个功能,当一个页面跳转到另外一个页面时用了这个写法: [code=csharp]rnrn GridShow.Children.Clear(); // GridShow是主页面下的一个Grid控件,里面用来加入其它页面rn ElevatorManage em = new ElevatorManage(); //新的页面rn GridShow.Children.Add(em);[/code]rn这样加入是不是一直往里加入页面,没有移除原来的页面啊?
vue设置一开始进入的页面
vue项目默认进入的页面是HelloWorld.vue现在我们创建一个页面Login.vue<template> <div> 登录界面 </div> </template> <script type="text/ecmascript-6"> export default { data() { ...
vue模拟后台数据
在项目根目录存放json文件 在项目根目录创建一个server.js文件 var express = require("express"); var app = express(); var appData = require('./data.json'); var seller = appData.seller; var goods...
vue后台数据接入
在项目中如果要接的后台数据接口量大,则需要将接口统一管理,将axios封装后 在页面中相应的位置上调用
vue模拟后台数据
 最近正在学习vuejs这个框架,我安装的vuejs是2.9.3的版本,在环境配置完成后打开项目发现没有dev-server这个文件,当时我就懵了,这表示我无法在按照以前的方法进行数据模拟,后来参考资料说dev-server已经整合到了webpack.dev.conf.js里,我先在这里说明怎么在新版本里面的vue里进行后台数据模拟:首先找到const portfinder = require('...
vue请求后台数据
一,使用axios发送请求 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 1安装 :$ npm install axios 2,请求界面引入impor...
vue 请求后台数据
需要引用vue-resource安装请参考https://github.com/pagekit/vue-resource官方文档在入口函数中加入import VueResource from 'vue-resource' Vue.use(VueResource);在package.json文件中加入 "dependencies": { "vue": "^2.2.6", "vue-re
vue页面跳转
真是百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,原来怎么都无法跳出App.vue,其实App.vue是渲染的主页面根本没办法跳出来啊,可以把组件内容放到新的页面中进行构建,在App.vue中只需要一个 <router-view></router-view> 就可以完成默认路由页面和各页面中 &...
Vue 页面跳转
1.单页面跳转 1.1 无参数-- this.$router.push(path: ' 路由 ') 传递参数  -- this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值  -- this.$route.query.key 1.2 无参数-- <router-link to="路由" >查看&...
ECHARTS如何获取后台数据
[code=javascript] require(rn [rn 'echarts',rn 'echarts/chart/line',rn 'echarts/chart/pie',rn 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载rn ],rn function (ec) rn // 基于准备好的dom,初始化echarts图表rn var myChart = ec.init(document.getElementById('echart')); rn myChart.showLoading( rn text : "图表数据正在努力加载...", rn effect :'ring',//'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble' rn textStyle : fontSize : 20 rn );rn var option = rn title:rn text:'财务对比图',rn x:80rn ,rn tooltip: rn show: truern ,rn legend: rn data:['计划','实际']rn ,rn toolbox: rn show : true,rn feature : rn mark : show: true,rn dataView : show: true, readOnly: false,rn magicType : show: true, type: ['line', 'bar', 'stack', 'tiled'],rn restore : show: true,rn saveAsImage : show: truern rn ,rn calculable : true,rnrn xAxis : [rn rn type : 'category',rn data : ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]rn rn ],rn yAxis : [rn rn type : 'value'rn rn ],rn series : [rn rn "name":"计划",rn "type":"bar",rn "data":[100, 100, 100, 10, 10, 20,190,30,12,50,52,66]rn ,rn rn "name":"实际",rn "type":"line",rn "data":[15, 50, 40, 10, 10, 20,190,30,12,40,52,66]rn rn ]rn ;rn //option.series.data=$.makeArray(result);rn rn // 为echarts对象加载数据 rn myChart.setOption(option); rn myChart.hideLoading(); rn rn ); [/code]rnrn其中以下代码希望通过AJAX获取到。使用JS和ASP该如何做呢 rnseries : [rn rn "name":"计划",rn "type":"bar",rn "data":[100, 100, 100, 10, 10, 20,190,30,12,50,52,66]rn ,rn rn "name":"实际",rn "type":"line",rn "data":[15, 50, 40, 10, 10, 20,190,30,12,40,52,66]rn rn ]
VUE 页面跳转
关于VUE中的页面跳转的几种方式 1.通过Vue的router做页面跳转,demo如下: this.$router.push({ name: "worksheet_detail", params: { worksheetId: this.worksheetId } }); 如上,就可以在params中带入参数,跳转你的目标页,但这样跳转会覆盖当前的标签页,有时不能满足需求   ...
vue 页面跳转
在路由中注册 Router/index.js import Vue from 'vue' import Router from 'vue-router' import home from '@/components/home' import Calendar from '@/components/Calendar' Vue.use(Router) export default new Rout...
vue页面跳转后返回原页面初始位置
vue页面跳转后返回原页面初始位置         vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的 一、main.js里
页面跳转时,目标页面没有响应。
数据库表名:sClass,键:ID,Name,Jibie,Fjid.rn页面:a.aspx和b.aspxrnrna.aspx.cs代码如下:rnrnpublic partial class a : System.Web.UI.Pagernrn protected void Page_Load(object sender, EventArgs e)rn rn DataBase db = new DataBase();rn string sql = "select ID,Name from Class where JiBie = 0 ";rn SqlDataReader dr = db.CreateCmd(sql).ExecuteReader();rnrn while (dr.Read())rn rn Response.Write("" + dr[1].ToString() + "");rnrn rn dr.Close();rn db.Dispose();rnrn rnrnrnrnrnrnrnb.aspx.cs代码如下:rnrnpublic partial class b : System.Web.UI.Pagernrn protected void Page_Load(object sender, EventArgs e)rn rn if (!this.IsPostBack)rn rn if (Request.QueryString["id"] == null)rn rn Literal1.Text = "没有内容,请检查问题。";rnrn rn elsern rnrn int ClassId;rn ClassId = Convert.ToInt32(Request.QueryString["TagsClass"].ToString());rn DataBase db = new DataBase();rn string sql = "select Name from sClass where (Fjid = " + ClassId + ") and (JiBie = 1)";rn SqlDataReader dr1 = db.CreateCmd(sql).ExecuteReader();rn while (dr1.Read())rn rn Literal1.Text += dr1[0].ToString();rn rn dr1.Close();rn db.Dispose();rn rnrn rnrnrn rnrnrn单独测试a,b两页面都能正常显示,数据输出正确,但是在a页面点击超链接文本,页面跳转时出错。rnrnrn说明: HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检查以下 URL 并确保其拼写正确。 rnrn请求的 URL: /mysite/b.apxrnrnrn我是初学者,恳请大家指出问题所在。谢谢!
页面获取后台数据并展示
后台是controller层,有个json;rn前端页面 位置是http://192.168.1.xxx/code?=123rn我怎么发送过去,然后怎么接收这个json,并在页面显示出来。
关于dojo与后台的数据传输及页面跳转
刚开始研究DOJO,不知道自己理解的对不对,是不是DOJO是使用JSON来和后台做数据交互的,另外,页面跳转的话是怎么样来实现的?
怎么让每次进入一个页面时自动刷新一下
怎么让每次进入一个页面时自动刷新一下
管理员如何进入后台
有些网站的后台不允许管理员从外部ip进 程序中也可以做相应的设置 但是如果设置以后管理员要怎样安全的进去后台 又不失网站的安全性呢
获取页面跳转时所带参数
1、路由跳转方式:域名?参数名=值&参数名=值 2、获取参数: let url = window.location.href; let option,strs; if (url) { if (url.indexOf("?") != -1) { let str = url.substr(1);
页面请求后台数据时loading效果!!!!
rn求正确能用的方法,具体要求如下图:rn[img=http://hi.csdn.net/attachment/201105/3/3862_13044157050b6i.jpg][/img]rnrn 也在网上找了好长的时间了,觉的这个还不错???rnrn网址如下: http://www.cnblogs.com/yeagen/archive/2010/03/29/1700079.htmlrn但是还是有空白页的等待时间?各位可以看看! http://kb.cnblogs.com/a/1274428/ rnrnrn rn 我现在所要的需求是.根据用户左侧的菜单不同,在右侧显示请求数据,当数据没有请救到时loading状态(遮罩层)一直存在,现在有些不明白,怎么判断,后台数据读取完成!从而将前台进行判断!!进行隐藏及显示不同的层!rn求正确的方法,或者给具体的思路.说些有用的.rn如图rn[img=http://hi.csdn.net/attachment/201105/3/3862_13044157050b6i.jpg][/img]rnrn[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/35.gif][/img]rn求正解.................rnrn
微信小程序页面监听右上角退出,判断小程序进入后台时就实现页面跳转
功能需求:在小程序中某一个页面没有进入后台的功能,如果点击右上角退出按钮,默认小程序进入后台,点击再次进入本页面,但是因为功能需要,在小程序进入后台时,再次进入需要跳转到首页。 实现方法: 在app.js onHide()生命周期中监听进入后台的事件,之后通过getCurrentPages()方法获取当前页面,判断跳转 onHide:function(){      let pages ...
关于登录进入页面后的问题
我现在已经做完登录界面了rnrn登录的时候登录到main.aspx这个页面rn根据不同用户显示rnrn数据库的截图: http://www.aspxer.net/help/sql.gifrnrn如:rn用user1登录,在main.aspx中就显示rnUserName Resource1 Resource2 Resource3rnuser1 word.exe excel.exernrn相同用rn用user2登录,在main.aspx中就显示rnUserName Resource1 Resource2 Resource3rnuser2 powerpoint access.exe word.exernrnuser3以此类推rnrn这个main.aspx要怎么写呢???rnrn谢谢
关于页面跳转时
一个表单,其中有一个“保存”按钮,如果没有进行保存,点击其他连接或跳转到其他页面。给出相应提示,如果选择“是”则不进行保存,直接跳转,否则留在原页面。如果当点“保存”时,不出再提示。rn我的想法本来是想用onbeforunload,不达到效果,但是无法实现点“保存”时,不出提示的功能。
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池