vue路由以及页面跳转的使用

博客已经好久没更新，今天突然想起写一些基础的东西，其中会附上代码，把代码运行起来再理解会比较容易，新手可以搭配上一篇《创建一个VUE项目运行》一起看，会事半功倍哦，忘记说上一篇安装init以后一直回车等到所有步骤执行完以后再运行。
vue项目运行完以后你会看到有一个App.vue文件，里面的东西我们不用改，新建一个跳转的子页面child还有存放公共组件的public，新建完以后就是这样的

然后开始修改代码
路由router文件夹下面的 index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Child from '@/components/child'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/child',
      name: 'Child',
      component: Child
    }
  ]
})

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 引入公共部分 -->
    <publicDiv :sign='headerSign' :parent='this' ></publicDiv>
     <!-- 引入公共部分 end-->
    <h2>首页</h2>
    <button @click="goBtn">跳转按钮</button>
  </div>
</template>

<script>
import publicDiv from '@/components/public'
export default {
  name: 'HelloWorld',
  data () {
    return {
      headerSign: 1,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    publicDiv
  },
  methods: {
    // 跳转到子页面
      goBtn(){
        this.$router.push({
          path:'/child',
          query:{
            'id':'add',//带参跳转
          },
        });
      }
  }
}
</script>
<style scoped>

</style>

public.vue

<template>
  <div class="hello">
      <div v-if="sign==1">公共111 公共引入部分可根据父组件和子组件的sign值改变</div>
      <div v-if="sign==2">公共222 公共引入部分可根据父组件和子组件的sign值改变</div>
  </div>
</template>

<script>
export default {
  name: 'public',
  data () {
    return {
      msg: 'Welcome'
    }
  },
  props: ['sign', 'parent']
}
</script>
<style scoped>

</style>

child.vue

<template>
  <div class="hello">
      <div>子页面</div>
  </div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      msg: 'Welcome'
    }
  },
  methods: {

  }
}
</script>
<style scoped>

</style>