美文网首页
第十一章 vue­-router路由和前端状态 管理

第十一章 vue­-router路由和前端状态 管理

作者: kzc爱吃梨 | 来源:发表于2019-10-30 10:25 被阅读0次

11.1 vue-­router路由基本加载

简单四步走

  1. 安装
npm install --save vue-router
  1. 引用
import router from 'vue-router'
Vue.use(router)
  1. 配置路由文件,并在vue实例中注入
var rt = new router({
  routes: [{
    path: '/hello',//指定要跳转的路径
    component: HelloWorld//指定要跳转的组件
  }]
})

new Vue({
  el: '#app',
  router: rt,
  components: { App },
  template: '<App/>'
})
  1. 确定视图加载的位置
<router-view></router-view>

11.2 vue-­router路由的跳转

<router-link to="/"></router-link>
<template>
  <ul>
    <li>
        <router-link to="/helloWorld">helloWorld</router-link>
    </li>
    <li>
        <router-link to="/helloEarth">helloEarth</router-link>
    </li>
  </ul>
</template>

11.3 vue­-router路由参数的传递

  1. 必须在路由内加入路由的name
  2. 必须在path后加/: +传递的参数
    • 传递参数和接收参数看下边代码
<router-link :to="{name:'helloWorld', params:{worldMsg:'只有一个世界'}}">
  helloWorld
</router-link>

读取参数:{{$route.params.worldMsg}}
方式:===/helloworld/你好世界


<router-link:to="{path: '/helloearth',query:{msg: 只有一个地球}}">
  HELLO WORLD
</router-link>

方式:===/helloworld?name=XX&count=xxx
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({
       query: route.query.q }) }
    ]
})

11.3.1 Axios之get请求详解

axios的简介:

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

  1. 安装
npm install axios
  1. 引入加载
import axios from 'axios'
  1. 将axios全局挂载到VUE原型上
Vue.prototype.$http = axios;
  1. 发出请求 以cnode社区API为例子
// 为给定 ID 的 user 创建请求
getData:function(){
      var self = this
      this.$http.get('https://cnodejs.org/api/v1/topics',{
        params: {
          page: 1,
          limit: 15
        }
      })
       .then(function(res){
         self.items = res.data.data
         console.log(res.data.data)
       })
       .catch(function(err){
         console.log(err)
       })
    }

// 可选地,上面的请求可以这样做
两种传递参数的形式
axios.get('/user', {
  params: {
    ID: 12345
  }
})
axios.get('/user', {
  ID: 12345
})
---------------------------------------------
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')

使用CNODE社区官方的API为例展开学习
获取主题列表API:https://cnodejs.org/api/v1/topics
参数:page页码
limit 每页显示的数量

11.3.1 Axios之post请求详解

postData:function(){
      var self = this
      this.$http.post(url,qs.stringify({
        page: 1,
        limit: 20
      }))
       .then(function(res){
         self.items = res.data.data
         console.log(res.data.data)
       })
       .catch(function(err){
         console.log(err)
       })
    }

POST传递数据有两种格式:

  • form­data ?page=1&limit=48
  • x­www­form­urlencoded { page: 1,limit: 10 }

在axios中,post请求接收的参数必须是form­-data
qs插件—­qs.stringify

相关文章

网友评论

      本文标题:第十一章 vue­-router路由和前端状态 管理

      本文链接:https://www.haomeiwen.com/subject/afibvctx.html