动态路由

路由的传参

1.首先在index.js文件下

{
  patha: ' /resitail/:id ',----加个id
  components: Resitail,
  name: 'resitail'
}

2.接着在list.vue路由下

<template>
  <div>
    <router-link  :to = "{name: 'resitail',params:{id: '002'},query:{a:2,b:2}}">
      
    </router-link>
  </div>
</template>

3.在Resitail接参

<template>
  <idv>
    <p>
      params: {{this.$route.params.id}}
    </p>
    <p>
      query: {{this.$route.query.a}}
    </p>
    <p>
      query: {{this.$route.query.b}}
    </p>
  </div>
</template>

编程式导航

push

• this.$router.push(’/home’)
• this.$router.push({name,params,query})
  replace
• this.$router.replace(’/home’)
• this.$router.replace({name,params,query})
  区别：
  push会将我们的操作保存到浏览器的历史纪录
  replace不会，效果为返回了二级

      //按钮返回
      push  replace  go  back
export default {
  methods: {
    gobtn () {
      this.$router.go(-1)
    },
    pushbtn () {
      this.$router.push('/home')
    },
    replacebtn () {
      this.$router.replace('/home')
    }
    backbtn () {
      this.$router.back()
    }
  }
}

配置反向代理

1.在根目录下创建一个vue.config.js

devServer: {
  proxy: {
    '/npai': {
      target: 'http:/www.duitang.com',
      changeOrigin: true
    }
  }
}

2.获取数据请求

 // this.$http === axios
export default {
  created () {
    this.$http ({
      url: 'npai/duitang/setting/',
      pramas: {
        app_code: 'mdt',
        app_verserdino: 6.0,
        328792837: '',
      }
    })
    .then( res =>{
      console.log( res )
    })
    .catch ( error => {
      if ( error ) throw error
    })
  }
}