vue项目路由跳转及请求接口流程

最新推荐文章于 2024-04-26 17:54:13 发布

weixin_43923665

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量4.4k

点赞数 1

分类专栏：学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43923665/article/details/126359049

版权

学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、路由跳转

1、实现路由跳转

1、vue项目进行页面之间的跳转需要依赖于vue-router，使用npm install vue-router安装依赖

2、安装完成后，在src目录下新建一个文件夹，命名为router,用来存放路由信息

3、在router文件夹下新建一个index.js文件，在文件里开始定义路由信息

4、在main.js文件里面引入路由文件

5、在views文件夹新建页面，用来测试跳转

6、开始实现路由文件，在router/index.js文件里面引入vue vue-router,使用vue.use方法引用vue-router插件

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

声明一个数组，来装需要跳转的页面集合

const routes = [{
  path:'/page-one',
  name:'pageOne',
  component: resolve => require(['../views/page1/index'], resolve),
  meta: {title: '页面1'}
}]

使用new VueRouter引入跳转集合，并将router文件暴露

const router = new VueRouter({
  routes
});

export default router;

整个router/index.js 如下

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

const routes = [{
  path:'/page-one',
  name:'pageOne',
  component: resolve => require(['../views/page1/index'], resolve),
  meta: {title: '页面1'}
},
//...
]


const router = new VueRouter({
  routes
});

export default router;

7、在App.vue文件下新增一行代码

<template>
  <div id="app">
  <!-- <router-view>路由匹配到的组件将渲染在这里<router-view> -->
    <router-view />
  </div>
</template>

8、验证，在地址栏输入页面1的路径，如果能正常显示页面1的内容，证明现在的路由生效了

2、页面之间不带参数跳转

1、跳转到不同页面可以有两种方式，即声明式和编程式

如都是从page1跳转到page2，声明式和响应式分别实现，代码如下

<template>
  <div>
    <h1>我是页面1</h1>
      <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/page-two">我要去页面2</router-link>
  </div>
</template>
<script>
export default {
  name:'PageOne'
}
</script>

点击“我要去页面2”就能跳转到页面2

使用编程式：可以通过 $router 访问路由实例。因此可以调用 this.$router.push

<template>
  <div>
    <h1>我是页面1</h1>
     <!-- 给按钮添加点击事件 -->
    <button @click="onGo">我要去页面2</button>
  </div>
</template>
<script>
export default {
  name:'PageOne',
  methods:{
    /**
     * 跳转到page2,push参数为想要跳转的页面路径
     */
    onGo(){
      this.$router.push('/page-two')
    }
  }
}
</script>

点击“我要去页面2”就能跳转到页面2

3、页面之间需要带参数跳转

声明式路由跳转时，直接将参数拼接到路径后面

<router-link to="/page-two?id=123">我要去页面2,携带参数id=123</router-link>

//也可以
<router-link :to="{ name: 'pageTwo', params: { id: '123' }}">
  我要去页面2,携带参数id=123
</router-link>

跳转到页面2，页面2的路径上会携带参数(用params携带参数，地址栏上不会有参数)

编程式路由有以下几种方式

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'pageTwo', params: { id: '123' } })

// 带查询参数，使用query传递参数时，浏览器进行刷新，参数不会留在地址栏上
router.push({ path: '/page-two', query: { id: '123' } })

4、获取路由参数

在页面2 获取页面1传递过来的参数

//参数是一个对象，里面组成是键值对形式

//页面如果使用query传递参数，就用query获取
console.log(this.$route.query) //{id: '123'}

//页面如果使用query传递参数，就用params获取
console.log(this.$route.params) //{id: '123'}

二、请求接口

1、使用npm install axios

2、在页面上使用

<template>
  <div>
    <h1>我是页面1</h1>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link :to="{ name: 'pageTwo', params: { id: '456' } }"
      >我要去页面2,携带参数id=123</router-link
    >
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'PageOne',
  mounted(){
    this.getApi()
  },
  methods: {
    getApi() {
      axios.post(url, {
        addressName: '贵阳市',
        areaId: '520100',
        categoryId: null,
        limit: 10,
        page: 1,
      }).then(res=>{
        console.log(res)
      })
    },
  },
}
</script>

打印res结果如下

axios配置

//用api方式请求接口
// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

//请求配置说明

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },


  // `data` 是作为请求体被发送的数据
  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  // 在没有设置 `transformRequest` 时，则必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属: FormData, File, Blob
  // - Node 专属: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  

  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)

  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default



  // `responseType` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responseType: 'json', // 默认值


}

全局挂载请求

将axios在mian.js文件引入，就可以在所有页面使用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.config.productionTip = false //设置为false,以阻止vue在启动时生成生产提示
Vue.prototype.$axios = axios
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

引用方式

this.$axios.post(url, {
        addressName: '贵阳市',
        areaId: '520100',
        categoryId: null,
        limit: 10,
        page: 1,
      }).then(res=>{
        console.log(res)
      })