Vue -- 二级路由params传参

• 内嵌二级路由

// router.js
import Vue from 'vue'
import Router from 'vue-router'
const Home = () => import('@/views/Home.vue')
const My = () => import('@/views/My.vue')

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/home',
      name: 'home',
      component: Home,
      children: [
      {
        path: 'my',
        name: 'my',
        component: My
      }
      ]
    },
    {
      path: '*',
      redirect: '/404'
    }
  ]
})

一级路由页面：通过 name 值跳转，params 方式传参（可避免因路径参数可视，被用户错误删改参数值）

// Home.vue
<template>
  <div class="hello">
     <button @click="toPage">跳转二级路由</button>
     <router-view />
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      test: '测试'
    }
  },
  methods: {
      toPage() {
          this.$router.push({
              name: 'my',
              params: {
                  test: this.test
              }
          })
      }
  }
};
</script>