Vue 脚手架学习第七天 this.$router.push（） 实现页面跳转及传参

// 字符串
this.$router.push('/viewAgent')
// 命名的路由
this.$router.push({ name: 'viewAgent', params: { isShow: true}})

<style>
</style>
<template>
  <div>
    <button @click="fn">点击</button>
  </div>
</template>
<script>
export default {
  methods: {
    fn() {
      // 由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。
      this.$router.push({ name: "agr", params: { age: 1, arr: [123] } });
    },
  }
};
</script>

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
    routes: [
        {
            path: "/",
            props: true,
            component: () => import('../page/Home'),

        },
        {
            name: 'agr',
            path: "/agr",
            props: true,
            component: () => import('../components/agr')
        },
    ]
})

接收参数

 props: ["age"],
  components: {},
  created() {
    console.log(this.$route.params);
  }