Vue学习之旅----编程式导航-js控制路由跳转

<template>
  <div>Home
    <button @click="getHomeData()">Home请求数据</button>
    <ul>
      <li v-for="(item,key) in list" :key=key>
        {{item.title}}
      </li>
    </ul>
    <!-- 给子组件传值绑定title属性 -->
    <v-header :title='title' :run="run" :home="this" ref='header'></v-header>
    <button @click="getSonData()">主动获取子组件的属性和方法</button>
    <br>
    <hr>
    <!-- 非父子组件通讯 -->
    <button @click="emitNews()">非父子组件传值----给news组件传值</button>
    <hr>
    <v-life v-if="flag"></v-life>
    <button @click="flag=!flag">挂载和卸载组件</button>
    <hr>
    <h2>get传值</h2>
    <ul>
      <li v-for="(item,index) in list2" :key=index>
        <router-link :to="'/pcontent?aid='+index">{{index}}----{{item}}</router-link>
      </li>
    </ul>
    <hr>
    <button @click="goNews()">通过js跳转路由</button>
  </div>
</template>
<script>
import VueEvent from '../model/VueEvent.js'
import Header from './Header.vue'
import Life from './Life.vue'
import Axios from 'axios'
export default {
  data () {
    return {
      msg: 'home',
      flag: true,
      list: [],
      title: '父组件要传给子组件的值',
      list2: ['111', '222', '333']
    }
  },
  components: {
    'v-header': Header,
    'v-life': Life
  },
  methods: {
    getHomeData () {
      // 请求数据
      var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
      Axios.get(api).then((response) => {
        this.list = response.data.result
      }).catch((error) => {
        console.log(error)
      })
    },
    run (data) {
      // 子组件通过执行run方法传递过来的值
      console.log(data)
      alert('我是父组件的run方法')
    },
    getSonData () {
      alert(this.$refs.header.msg)
      this.$refs.header.sonRun()
    },
    emitNews () {
      // 广播组件
      VueEvent.$emit('to-news', this.msg)
    },
    goNews () {
      // 方法一
      // this.$router.push({ path: 'news' })
      // 另一种命名式路由
      this.$router.push({ name: 'News' })
    }
  },
  mounted () {
    VueEvent.$on('to-home', (data) => {
      console.log(data)
    })
  }
}
</script>
<style lang="css" scope>
</style>

一种式编程式，push路径，一种是命名式，push名字