VUE 路由参数动态变化，刷新页面动态变化

VUE 路由参数动态变化，刷新页面路由参数动态变化，子组件获取路由参数

场景：响应路由参数变化，当使用路由参数时，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过组件的生命周期钩子不会再被调用。注意：使用 param 传参需要提供路由 name ，使用 query 传参需要提供路由 path 。

路由传参用到了编程式导航

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

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

复用组件时，对路由参数的变化作出响应，可以简单地 watch (监测变化) $route 对象：
router/index.js

const router = new Router({
  mode: 'history', //去掉router中的#号
  routes: [
    {
      path: '/boss',
      name: 'boss',
      component: home,
      children: [{
        path: 'index',
        component: bossIndex,
        name: 'bossIndex'
      }, {
        path: 'team/:id',
        component: bossTeam,
        name: 'bossTeam'
      }]
    },
    {
      path: '/login',
      component: login,
      name: 'login'
    },
    {
      path: '/404',
      component: NotFound,
      name: '',
      hidden: true
    },
    {
      path: '*',
      redirect: '/404',
      hidden: true
    }
  ]
})

parent.vue

      go: function (e, p) {
        if (e === '/boss/team') {
          this.$router.push({
            name: 'bossTeam',
            params: { id: p }
          })
        } else {
          this.$router.push(e)
        }

      }

child.vue

<template>
  <div class="boss-team">团{{ teamId }}</div>
</template>

<script>
  export default {
    name: "bossTeam",
    data () {
      return {
        teamId: null
      }
    },
    created: function () {
      this.init()
    },
    mounted: function () {

    },
    watch: {
      '$route' (to, from) {
        this.init()
      }
    },
    methods: {
      init () {
        var uid = this.$route.params.id
        this.teamId = uid
        console.log('详情页id = ' + uid)
        console.log(this.$route)
      }
    }
  }
</script>

以上用 param 传参页面动态加载，除了这种方法也可以用 vuex 管理子组件的状态动态改变内容来实现
图一：

图二：

点击参考官方文档