【基于vuedesign+php的二手交易系统】- 3、设置跳转路径router，axios访问后端接口

设置跳转路径router

1. 下载依赖

npm install vue-router

2. 创建需要跳转的页面，并做上标记
   
3. 在src/下面新建一个router文件夹
   

//index.js：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//跳转的页面的路径
import index from '../views'
import home from '../views/home'
import login from '../views/login'

const routes = [
    {
        path:'/',
        name:'index',
        component:index
    },
    //第一个是表示首页
    {
        path:'/home',
        name:'home',
        component:home
    },
    {
        path:'/login',
        name:'login',
        component:login
    },
]

const router = new VueRouter({
    mode: 'history',  //去掉url中的#
    routes,
})

export default router

4. 在App.vue中注释掉helloworld相关的东西，再<template>中添加一个<router-view />
   

5. 在main.js中添加router
   
   这样就可以实现页面跳转了。
   
   

axios访问后端接口

我们通过PHP已经写好了一个测试接口：上一章有说怎么写这个测试接口

1. 安装axios

npm install axios

2. 在路径下面新建一个vue.config.js文件

module.exports = {
  lintOnSave: false,
    devServer: {
      proxy: {
          '': {
            target:'这里写你自己的路径就可以了',
            changeOrigin:true,
          }
      }  
    }
}

3. 在自己想要的页面写上一个接口，我是在首页写的

import axios from 'axios'
export default {
  mounted(){
      this.test()
  }, 
  methods:{
      test(){
          axios.get('/test.php').then(r => {
              console.log(r.data)
          })
      }
  },
}

4. 最后查看页面，就可以了

这里有个问题，就是前端获取到了数据是string类型的，我们需要给她转换成JSON类型，因为这个数据是JSON 数组格式的，所以这里不能使用JSON.parse()，需要使用eval()：eval("(" + string + ")")

JSON知识要点

JSON.parse() 方法是将JSON字符串转换为JavaScript对象
JSON.stringify() 方法是将JavaScript 值转化为JSON字符串
eval(）函数是直接执行其中的 JavaScript代码，能够解析JSON字符串。
delete 关键字来删除数组元素：delete data.id[1];