Vue笔记

路由

import Vue from 'vue'
import Router from 'vue-router'
import Address from "./views/address/Index";
Vue.use(Router)
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  // linkActiveClass:'on',
  routes: [
    {
      path: '/address',
      name: 'address',
      component: Address,
      meta:{
        title:'地址'
      }
    },
   {
      path: '/:id',
      name: 'show',
      component: Show,
      meta:{
        title:'show'
      }
    },
       component: ()=>import('./views/address/Newaddress.vue'),
    },
    
  ]
})

路由传参

<router-link :to="{name:'show',params:{id:product.id}}"></router-link>

初始化代码

<script>
    export default {
        name: "Index",
        data() {
            return {
                carts: [],
                totalCart: {}
            }
        },
        created() {
            this.init();
        },
        methods: {
            init: function () {
                this.axios.get('api/cart/index').then((res) => {
                    console.log(res.data)
                    this.carts = res.data.carts
                    this.totalCart = res.data.totalCart
                    //根据data设置title
                    //document.title = this.product.name;
                    if(res.data.carts==0){
                        this.$router.push({name:'emptycart'})
                    }
                })
            },
            changeNum(id,num,type) {
                if (num == 1 && type == 'sub') {
                    return false
                }
                this.axios.put('api/cart/changenum', {id: id, type: type}).then((res) => {
                   this.init();
                    if(res.data.carts==0){
                        this.$router.push({name:'emptycart'})
                    }
                })
            }
        }
    }
</script>

配置api统一地址

1.安装axios后将main.js里面的import axios from 'axios'替换成import axios from './http.js'
2.新建http.js文件,写入以下代码:

import axios from 'axios'
axios.defaults.timeout = 5000;
axios.defaults.baseURL = process.env.VUE_APP_URL;
export default axios;

3.新建.env文件,写入内容VUE_APP_URL=http://shop.test/