Vue.js学习-路由、页面跳转、传参、插槽

1.平级路由及子路由添加：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
import Hello1 from '@/components/Hello1'
import Hello2 from '@/components/Hello2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello,
      children: [
        {
          path: 'hello1',
          name: 'Hello1',
          component: Hello1
        },
        {
          path: 'hello2',
          name: 'Hello2',
          component: Hello2
        }
      ]
    }
  ]
})

2.路由之间跳转及传参

    a）可以通过下面代码进行路由的跳转和传参（本页面跳转和打开新页面）

goOn:function(){
      this.$router.push({name:"Hello",query:{id:15}});
    },
goOn2:function(){
      window.open("http://192.168.1.232:8080/#/hello?id=15");
},

    b) 目标页面通过下面代码获取参数

msg: this.$route.query.id

3.如何在父组件中展示子组件 

其中区域就是用于子组件的展示。

4.父子组件中的传参

    a)父组件向子组件传参    

//父组件
    
 

data () {
    return {     
      toChildParam:44444
    }
  },

//子组件


    {{giveson}}


props:[
    "giveson"  
  ],
 

b)子组件向父组件传参

//父组件

      
 

 methods:{    
    getSonData:function(sondata){
      this.msg = sondata;
    }
  },
//子组件
向父级传参

methods:{    
    giveFather:function(){      
      this.$emit("getSonData","111111");
    }
  }

5.插槽

     a)父页面      

      
dhjksjdjsddjdj
 

     b)子页面