美文网首页
Vue知识点

Vue知识点

作者: Sharise_Mo佩珊 | 来源:发表于2017-12-27 10:34 被阅读0次

vue-router

在mounted函数中获取从路由地址带过来的参数:
  • 定义动态路由: { path: 'new-shop/:store_id', name: 'newShop' }
  • 获取路由参数: this.$route.params.store_id
路由重定向与路由跳转
  • this.router.push({name: 'homeIndex'}) // 往路由history栈中添加一条记录,这样按浏览器的返回键时会回退到上一个页面
  • this.$router.go(n) // 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)
  • this.$router.replace({name: 'honeIndex'}) // 替换掉当前history栈中的记录,重定向

vuex

  • 在页面中用到storeid的时候
 computed: {
      ...mapGetters([
        'storeid'
      ]),
      storeid() {
        console.log(this.$store.state.shop.storeid)
        return this.$store.state.shop.storeid
      }
    },
  • 页面操作触发state变化时
let id = res.data.id
this.$store.commit('GET_STOREID', id)
this.$store.dispatch('GetStoreId', id)
  • store文件
// 门店模块的全局变量
const shop = {
  state: {
    storeid: '',
  },
  mutations: {
    GET_STOREID: (state,store_id) => {
      state.storeid = store_id
      console.log('store-shop 中的 storeid为:')
      console.log(store_id)
    },
  },
  actions: {
    GetStoreId: ({ commit }, param) => {
      commit('GET_STOREID')
    }
  }
}
export default shop
  • 最后记得在store的统一出口引入模块,再导出

相关文章

  • 118页Vue面试题总结,为面试提前做准备

    Vue面试题文档内容主要包括vue-cli工程,vue核心知识点,vue-router,vuex,http请求,U...

  • Vue部分基础知识点总结

    Vue基础知识点: 1.Vue:过滤html标签 ----{{{数据名}}}. 2.Vue:单次插值语法: ...

  • vue学习(25)自定义指令

    知识点 1:局部指令new Vue({directives:{指令名,配置对象}})new Vue({direct...

  • Vue知识点合集

    Vue vue.js中el是什么vue 基础知识Vue杂七杂八的知识点(此篇比较老了)指令vue v-text &...

  • 临时

    Vue 常考进阶知识点 这一章节我们将来学习 Vue 的一些经常考到的进阶知识点。这些知识点相对而言理解起来会很有...

  • 学习链接

    vue-router教程总结 vue生命周期和钩子函数 详解vue生命周期 Vue2.0八——知识点整理 vuex...

  • Vue真是太好了 壹万多字的Vue知识点 超详细!

    《Vue真是太好了 壹万多字的Vue知识点 超详细!》 ---- ️️、Vue和其他两大框架的区别 Angular...

  • (十)Vue中的is和操作DOM

    本节知识点 Vue 中的is 问题 (1) Vue中的is属性 vue中is的属性引入是为了解决dom结构中对放入...

  • axios

    1、axios知识点 (1)axios是Vue中的ajax,axios分为1.0版本(Vue-resource)和...

  • (十五)vue中真机测试

    本节知识点 (1)vue中真机测试 真机测试 vue运行在webpackserver服务上,而webpackser...

网友评论

      本文标题:Vue知识点

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