vue路由传参

一、props配置

// 组件内定义
props: ['id']

// 路由映射配置，开启props:true 
{
  path: '/user/:id',
  component: User,
  props: true 
} 

// 1、标签跳转
<router-link to="/user/1">第一个</router-link>

// 2.函数式跳转
getDescribe(id) {
  this.$router.push({
    path: `/describe/${id}`,
  })
}

// 获取参数：
<div>第一种传值props： {{ id }}</div>

二、URL显示在问号之前配置

// 路由映射配置
{
  path: '/user/:id',
  component: User 
}

// 1、标签跳转
<router-link to="/user/1">第二个</router-link>

// 2.函数式跳转
getDescribe(id) {
  this.$router.push({
    path: `/user/${id}`,
  })
}

// 获取参数
<div>第二种传值$route.params.id： {{ $route.params.id }}</div>

三、URL不显示参数配置

// 路由映射配置：
{
  path: '/user',
  name: 'user',
  component: User
}

// 1、标签跳转
<router-link :to="{ name: 'user',  params: { id: 1 }}">第四个</router-link>

// 2.函数式跳转：
getDescribe(id) { 
  this.$router.push({
    name: 'user',
    params:{ id: id}
  })
}

// 获取参数：
<div>第三种传值$route.params.id： {{ $route.params.id }}</div>

四、URL显示在问号之后配置

// 路由映射配置
{
    path: '/user',
    name: 'user',
    component: User
}

// 1、标签跳转
<router-link :to="{ name: 'user',  query: { id: 1 }}">第四个</router-link>

// 2.函数式跳转
getDescribe(id) {
  this.$router.push({
    path: `/user`,
    query:{id: id}
  })
}

// 获取参数
<div>第四种传值$route.query.id： {{ $route.query.id }}</div>