【无标题】

最新推荐文章于 2024-06-07 23:26:45 发布

Maui1027

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量193

点赞数

分类专栏：学习文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/Maui1027/article/details/126547851

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue路由传递参数和接受参数的方式

query的方式传参

将要传递的参数携带在路由上的方式

传参

 <router-link :to="`/home/news/detail?id=${news.id}&title=${news.msg}`">{{ news.msg }}</router-link>

接受参数(直接使用$route来接受参数)

<template>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <h2>新闻详情</h2>
        <h5>ID:{{ $route.query.id }}</h5>
        <h5>新闻标题：{{ $route.query.title }}</h5>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Detail',
  data() {
    return {

    }
  },
}
</script>

使用对象的方式传递参数

传递

<li v-for="news in newsList" :key="news.id">
    <router-link :to="{
        name: 'detail',
        query: {
          id: news.id,
          title: news.msg
    }
}">{{ news.msg }}</router-link>
</li>

接收

<template>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <h2>新闻详情</h2>
        <h5>新闻ID:{{ $route.query.id }}</h5>
        <h5>新闻标题：{{ $route.query.title }}</h5>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Detail',
  data() {
    return {

    }
  },
}
</script>

使用props的方式传递参数

传参

<li v-for="news in newsList" :key="news.id">
    <router-link :to="{
name: 'detail',
    query: {
        id: news.id,
            title: news.msg
    }
}">{{ news.msg }}</router-link>
</li>

路由的参数

{
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news',
          component: News,
          children: [
            {
              name: 'detail',//路由的命名
              path: 'detail',
              component: Detail,
              props($route) {
                return { id: $route.query.id, title: $route.query.title }
              }
            }
          ]
        },
        {
          path: 'message',
          component: Message
        }
      ]
    },

接收参数

<template>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <h2>新闻详情</h2>
        <h5>新闻ID:{{ id }}</h5>
        <h5>新闻标题：{{ title }}</h5>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Detail',
  props: ['id', 'title'], //使用props接收参数
  data() {
    return {

    }
  },
}
</script>

使用params传递参数

路由占位方式传参

传参

<li v-for="news in newsList" :key="news.id">
    <router-link :to="`/home/news/detail/${news.id}/${news.msg}`">{{ news.msg }}</router-link>
</li>

路由占位符

children: [
    {
        path: 'news',
        component: News,
        children: [
            {
                name: 'detail',
                path: 'detail/:id/:title',
                component: Detail
            }
        ]
    },
    {
        path: 'message',
        component: Message
    }
]

接收参数

<template>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <h2>新闻详情</h2>
        <h5>新闻ID:{{ $route.params.id }}</h5>
        <h5>新闻标题：{{ $route.params.title }}</h5>
      </div>
    </div>
  </div>
</template>
<script>

路由对象的方式传递参数

传参

<li v-for="news in newsList" :key="news.id">
    <router-link :to="{
name: 'detail',
    params: {
        id: news.id,
            title: news.msg
    }
}">{{ news.msg }}</router-link>
</li>

路由占位

children: [
    {
        name: 'detail',
        path: 'detail/:id/:title',
        component: Detail
    }
]

接收参数

<template>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <h2>新闻详情</h2>
        <h5>新闻ID:{{ $route.params.id }}</h5>
        <h5>新闻标题：{{ $route.params.title }}</h5>
      </div>
    </div>
  </div>
</template>

props的形式传参

传递参数

<li v-for="news in newsList" :key="news.id">
    <router-link :to="{
name: 'detail',
    params: {
        id: news.id,
            title: news.msg
    }
}">{{ news.msg }}</router-link>
</li>

路由的props和占位符

children: [
    {
        name: 'detail',
        path: 'detail/:id/:title',
        component: Detail,
        props($route) {
            return {
                id: $route.params.id,
                title: $route.params.title
            }
        }
    }
]

接收参数

<template>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <h2>新闻详情</h2>
        <h5>新闻ID:{{ id }}</h5>
        <h5>新闻标题：{{ title }}</h5>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Detail',
  props: ['id', 'title'],
  data() {
    return {

    }
  },
  mounted() {
    console.log(this.$route)
  },
}
</script>