vue3在加载页面时发送请求

vue3在加载页面时发送请求

在vue页面中,页面加载时 1自动执行获取url地址以及参数 2发送请求给后端接口 3自动跳转到别的页面用路由跳转 所有代码如下 export default

npm install axios --save

npm install qs

import 'amfe-flexible'

import store from '/store/storejs'

// 在>

Vue是一种前端JavaScript框架，它使用了单页面应用（Single-Page Application）的概念。在单页面应用中，整个网站只有一个HTML文件，通过JavaScript动态地渲染页面，从而实现了各种交互效果。

在Vue中，页面之间的路由是通过改变URL来实现的。当用户在浏览器中输入特定的URL时，Vue框架会检测这个URL，并根据URL中所指定的路由规则来渲染相应的组件。也就是说，路由的实现是在前端代码中完成的，不需要向服务器发起>

Vue中访问外部URL会被浏览器取消，因为浏览器的同源策略，只允许同源的脚本访问外部URL。

解决方法：

1使用JSONP：JSONP是一种跨域访问的技术，可以让浏览器访问不同源的资源，它通过动态创建script标签，并将src设置为外部URL，从而实现跨域访问。

2使用CORS：CORS是一种跨域访问的技术，可以让浏览器访问不同源的资源，它通过在>

开关

为分页组件添加一个开关（openroute），因为需要灰度上线，万一有问题，要调整的页面也只有一个。代码如下：

<script>

export default {

props: {

openroute: {

type: Boolean,

default: () => (true)

}

},

}

</script>

分页组件中存储页码和选择条件&获取页码

<script>

export default {

methods: {

fetchData(page) {

//请求参数

let params = thisparams;

//请求页码

let newPage;

//openroute处理

if (thisopenroute) {

//为url添上#page

if (page) {

historyreplaceState(paramsdata, documenttitle, "#" + page);

} else {

if (historystate) {

if (!historystatekey && locationhash && locationhashsplit("#") && locationhashsplit("#")[1]) {

if (JSONstringify(historystate) !== JSONstringify(paramsdata)) { //选择条件变更则请求第一页

historyreplaceState(paramsdata, documenttitle, "#1");

} else {

historyreplaceState(paramsdata, documenttitle, "#" + locationhashsplit("#")[1]);

}

} else {

historyreplaceState(paramsdata, documenttitle, "#1");

}

} else {

if (locationhash && locationhashsplit("#") && locationhashsplit("#")[1]) {

historyreplaceState(paramsdata, documenttitle, "#" + locationhashsplit("#")[1]);

} else {

historyreplaceState(paramsdata, documenttitle, "#1");

}

}

}

//获取url后面的#page

if (locationhash && locationhashsplit("#") && locationhashsplit("#")[1]) {

newPage = Number(locationhashsplit("#")[1]);

} else {

newPage = 1;

}

} else {

newPage = page;

}

//请求数据，获得结果，传递给列表页面

}

}

}

</script>

列表页面获取选择条件

以上就是关于vue3在加载页面时发送请求全部的内容，包括:vue3在加载页面时发送请求、vue 封装数据请求、vue3.2根据url设置菜单为选中状态等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！