学习尚硅谷外卖知识点

1 . 可以使用路由器this.$router.replace(path)来点击跳转页面

2 . 可以使用this.$route.path，获得当前页面的路径

3 . 在头部中如果几个页面顶部类似，则可以使用命名式插槽，决定谁的存留

4 . 当单页面上下滑动的时候，单个 页面的滑动，会使其他页面同时也滑动，则使用overflow： heidden，阻止滑动即可

5 . 在登录界面与主界面交互中可以使用$router.back()快速进行跳转

6 . vue项目脚手架跨域问题

解决方法：

proxyTable: {

        '/api': { 
​
        target: 'http://localhost:4000', *//源地址* 
​
         changeOrigin: true, *//是否跨域*
​
          pathRewrite: { 

　　　　　　'^/api': '' //路径重写

             } 
​
        } 
​
    },

7 . vuex更新数据的两种方法

方法一：

part1：更新数据

第一步：import {mapActions，mapstate} from 'vuex'

第二步：methods: {

         ...mapActions(['getAddress'])

　　　　}

第三步： mounted() {

            this.getAddress()
​
         },

part2:读取数据

第四步：computed: {

　　　　　　...mapState(["address", "categorys"]),

　　　　}

方法二：

part1:更新数据

mounted(){

　　this.$store.dispatch("getAddress");

}

part2:读取数据

computed: {

　　...mapState(["address", "categorys"]),

}

8 . @click.prevent取消默认行为

9 . 当图片验证码发送请求的时候，更新时，可已使用event.target.src='http://######?time=' + Date.now()；解决因为tartget的地址 必须发生该变才会调用

10 . 解决为数据因异步读取而页面读取数据错误的解决方法：使用v-if='xxx.yyy'来判断yyy是否存在

11 . 解决异步获取数据，对数据进行操作时报错的问题：

方法一：使用watch监视

watch: {

   categorys(value) {
​
   this.$nextTick(function () {

　　　　//使用swiper轮播

　　　　new Swiper(".swiper-container", {

　　　　　　pagination: {

　　　　　　el: ".swiper-pagination",

　　　　　　　},

　　　　　　loop: true,

         });
​
     });
​
 },

方法二：更新数据传入一个回调函数

this.$store.dispatch("getShopGoods", ()=>{

   this.$nextTick(()=>{

　　　　new BScroll('.menu-wrapper')

       new **BScroll**('.foods-wrapper')
​
     })
​
});

在actions中调用 callback && callback()

12 . methods中一般存放事件的回调函数相关方法，_初始化方法

13 . 当vue项目中给已经数据绑定的数据添加新的属性的时候，会产生数据更新但是页面没有更新的状态，这时候需要使用Vue.set(xxx,"yyy",value) ；xxx为数据名，yyy为添加新的属性，value为属性值

14 . 停止内部组件向外部组件点击事件冒泡，使用@click.stop 。form表单提交用@submit.prevent

15 . 使用$router.back() 因为是push而不是replace所以在router-link使用replace属性定为replace

侵权必删