vue路由组件传递参数四种方式（九）（布尔模式，命名视图，对象模式，函数模式）详细讲解使用

1.布尔模式

在你的组件中使用 $route 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 props 配置来解除这种行为：

1.1 传递一个参数

1.1.1 路由添加 props：true，当 props 设置为 true 时，route.params 将被设置为组件的 props。

{
    path: '/Profile/:username',
    name: 'Profile',
    props: true,
    component: () => import('../views/profile.vue'),

  },

1.1.2 传递参数

 <el-button>
      <router-link to="/Profile/name张三">Profile</router-link></el-button
    >

1.1.3 页面接受参数

props: ["username"], 注意这里的username要和前面的传递参数键对应起来

<template>
  <div style="margin: 50px; line-height: 34px; width: 800px">
    <h2>profile</h2>
    <h3>参数为:【{
   
   { username }}】--路由展示参数，页面刷新参数不消失</h3>
    <h3></h3>
  </div>
</template>
<script>
export default {
  name: "Table",
  props: ["username"],
  components: {},
  data() {
    return {
      dataDraggerle1: [
        { student: "11", number: 1 },
        { student: "22", number: 2 },
        { student: "33", number: 3 },
        { student: "44", number: 4 },
      ],
      dataDraggerle2: [
        { student: "5", number: 5 },
        { student: "6", number: 6 },
        { student: "7", number: 7 },
      ],
    };
  },
  methods: {},
  mounted() {
    //3这里可id以看到传递的参数username
    console.log("mounted", this.username);
  },
  created() {
    //3这里可id以看到传递的参数username
    console.log("created", this.username);
  },
};
</script>
<style scoped lang="scss">
h2 {
  color: purple;
  margin-bottom: 10px;
}
h3 {
  font-size: 18px;
}
</style>

2 对象传参传递多个参数

2.1 path后面直接写参数

{
    path: '/Profile/:username/:userid',
    name: 'Profile',
    props: true,
    component: () => import('../views/profile.vue'),

  },

2.2传递时也直接拼参数

  <el-button>
      <router-link to="/Profile/name张三/123">Profile</router-link></el-button
    >

2.3

<template>
  <div style="margin: 50px; line-height: 34px; width: 800px">
    <h2>profile</h2>
    <h3>
      2 username参数为:【{
   
   { username }}】--路由展示参数，页面刷新参数不消失
    </h3>
    <h3>2 userid参数为:【{
   
   { userid }}】--路由展示参数，页面刷新参数不消失</h3>
    <h3></h3>
  </div>
</template>
<script>
export default {
  name: "Table",
  //1
  props: ["username", "userid"],
  components: {},
  data() {
    return {};
  },
  methods: {},
  mounted() {
    //3这里可id以看到传递的参数username
    console.log("mounted", this.username, this.userid);
  },
  created() {
    //3这里可id以看到传递的参数username
    console.log("created", this.username, this.userid);
  },
};
</script>
<style scoped lang="scss">
h2 {
  color: purple;
  margin-bottom: 10px;
}
h3 {
  font-size: 18px;
}
</style>

3.命名视图传递参数

如果一个页面有多个命名视图，对于有命名视图的路由，你必须为每个命名视图定义 props 配置：

官网例子

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

看我的例子更加清晰明了

2.1 比如我们上面的例子，又增加了一个底部固定的视图组件，不明白命名视图的可以看看前几期的讲解（就是我的每一个页面都要有一个顶部和一个底部组件展示商标或者logo固定的，也可以传递参数）

第一步

在路由中配置

props 对应上面的 components

 {
    path: '/Profile/:username/:userid',
    name: 'Profile',
    components: {
      default: () => import('../views/profile.vue'),
      footerName: Footer//（ => import('../views/Footer.vue')）//上面的组件需要引入
    },
    props: {
      default: true, //也可以选择false,不展示
      footerName: {
        footerdata: "正版"
      }
    }
  },

2 底部footer组件接接受参数

<template>
  <div style="margin: 50px; line-height: 34px; width: 800px">
    <h2>
      版权所有，翻版必究<span style="color: blue">{
   
   { footerdata }}</span>
    </h2>
  </div>
</template>
<script>
export default {
  name: "Table",
  props: {
    footerdata: {
      type: String,
      default: "绝版",
    },
  },
};

4.函数模式

  {
    path: '/Test/:username', //传递一个参数
    name: 'Test',
    components: {
      default: () => import('../views/Test.vue'),
      footerName: Footer
    },
    props: {
      default: route => {
        search: route.query.search //用了eslintrc这里报错
      },
      footerName: {
        footerdata: "正版"
      }
    }
  },

<template>
  <div>
    <h3>test:{
   
   { search }}</h3>
  </div>
</template>
<script>
export default {
  props: ["search"],
};

vue路由组件传递参数四种方式（九）（布尔模式，命名视图，对象模式，函数模式）详细讲解使用

猜你喜欢