vue页面间传参

rout-link标签跳转

携带参数

<template>
  <div id="app">
    <!-- 不带参数 -->
    <div><router-link :to="/">首页</router-link></div>
    <!-- 路由路径 -->
    <div><router-link :to="{path:'/news/detail',query:{id:1}}">详情</router-link></div>
    <!-- 路由名字 -->
    <div><router-link :to="{name:'newsDetail',params:{id:1}}">详情</router-link></div>
  </div>
</template>

接收参数

使用path + 路径，query + 参数。则用this.$route.query.参数名 取值。
使用name +路由名称，params + 参数。则用this.$route.params.参数名 取值。

$router.push跳转

// 方法一
this.$router.push({
    path: '路由名称',
    params: {
        参数名: 参数值,
        参数名: 参数值
    }
})
// 方法二
this.$router.push({
    path: '/路径',
    query: {
        参数名: 参数值,
        参数名: 参数值
    }
})

路由组件间的传参

route/index.js

const routes = [
{
          path: '/news',
          name: 'news',
          props: true,
          meta: {},
          component: () => import('@/page/news.vue')
        },  
      {
          path: '/newsDetail/:id',
          name: 'newsDetail',
          props: true,
          meta: {},
          component: () => import('@/page/newsDetail.vue')
        }  
]

该方式需要使用$router.push()跳转
组件.vue

export default {
  name: 'HelloWorld',
  data () {
    return {}
  },
  props:['id'],// 接收参数
  mounted(){
    console.log(this.$route.params.id, this.id)
  }
}