VUE篇 7 vue-router

vue-router 

https://router.vuejs.org/zh/guide/essentials/navigation.html

 

query 

http://.../index.html?userid=2  

router-link

:to = '{name:"index",query:{"userid":2}}'

 

params

类似

http://../index.html/123

http://../index.html/123

 

声明式<router-link :to = "..">

编程式  router.push({path:"home"})  或者 是

　　　　动态路由匹配 

　　　　　　　　 router.push({name:'user'，params：{userid:123}})  

 　　　　　　　　

　　　　　　　　// 带查询参数，变成 /register?plan=private
　　　　　　　　router.push({ path: 'register', query: { plan: 'private' }})


router.go(1)  前进 

router.go(-1) 返回

路由嵌套。。




执行顺序 package.json 中的dev  然后build下的 webpack.dev.conf.js  然后

有个basewebpackconfig

入口 entry 然后 main.js

父子组件传值

 

父组件向子组件传值  

首先需要两个组件，一个作为父组件一个子组件 

父组件：

　　1在script 导入子组件

　　2compont声明子组件

　　3 在return 中定义一个要传的值，

　　4 子组件挂在父组件上 然后等号右边的值传到等号左边的参数

<template>
  <div class="hello">
    我是你好父亲
    <Son title="alex" />
      <Son :msg="msg" />

    </div>

</template>

<script>
import Son from './Son'
export default {
  name: 'HelloWorld',

  data () {
    return {
      msg: '我是父组件的信息'
    }
  },
  components:{
    Son
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

子组件：

　　在props 中接受参数 

　　然后在模板中用它

<template>
<div>
  我是儿子 111 {{title}}11-
  -22{{msg}}22
</div>
</template>

<script>
export default {
  name: "Son",
  props:['title','msg'],
}
</script>

<style scoped>

</style>

 

 

子组件向父组件发送值

子组件：

　　1 在created中用emit 传值

  created() {
    this.$emit('handler',1)
  }   // 方法名 和值

 

父组件：

　　1在script 导入子组件

　　2compont声明子组件

　　3 子组件挂在父组件的标签上 加一个对应的方法

<Son @handler="handlerClick" />

　　4 用js 接收这个值

methods:{

    handlerClick(val){
      alert(val);
    }

 

BUS传值

　　其实bus 就是vue的实例化

　　我们在main中实例化vue 然后挂宅到当前的全局vue中 就能用了

 

let bus = new Vue()
Vue.prototype.$bus = bus;

 

它其实就是一个组件发送 一个组件接收，不论父子，只认 emit 和on

  

写一个button 标签 里面写个点击事件 然后事件调用emit（事件，参数）      

<button @click="busHandler">bus传值</button>

//////////////////////////////
,methods:{

    busHandler(){
      this.$bus.$emit('click','zxd')
    }

  }

 

在另一个组件中 on用来监听click事件中穿过来的值

  created() {
 
    this.$bus.$on('click',(name)=>{
      this.name=name
    })
  }