Vue路由传参

vue路由传参

vue路由传参理解为以下三种：

显式params传参
隐式params传参
query传参
每一种又分为router-link和this.$rouer.push

params

• 显式params传参

1. 子路由需要提前配置好参数
2. 导航栏格式为：http://localhost:8080/about/1，带参数
3. 接收时：this.$route.params.id
4. 刷新界面后，传过来的值一直存在

第一种

{
  path: '/about/:id',
  name: 'about',
  component: () => import('../views/AboutView.vue')
}

<router-link to="/about/1">About</router-link>

// 浏览器导航栏地址
http://localhost:8080/about/1  刷新后一直存在

第二种

<button @click="toAbout(id)">params参数显示路由传参</button>
data() {
  return {
    id: 100
  }
},
methods: {
  toAbout(id) {
    this.$router.push({
      path: '/about/'+ id
    })
  }
}
// 浏览器导航栏地址
http://localhost:8080/about/100  刷新后一直存在

• 隐式params传参

1. 子路由不提前配置参数
2. 导航栏格式为：http://localhost:8080/about，不带参数
3. 接收时：this.$route.params.id
4. 刷新界面后，传过来的值变成undefined
5. 必须使用路由别名

第一种

{
	path: '/about',
	name: 'about',
	component: () => import( '../views/AboutView.vue')
},
      
<router-link :to="{name: 'about', params: {id: 999, name: 'xx'}}">About</router-link>

// http://localhost:8080/about  

第二种

toAbout() {
  this.$router.push({
    name: 'about',
    params: {
      name: 'hh2',
      age: 24
    }
  })
}

query

• 没有配置子路由这一说
• 没有强制要求必须使用路由别名
• 导航栏格式为： http://localhost:8080/about?id=999&name=xx，以问号连接参数
• 接收参数：this.$route.query.name
• 刷新页面后，路由传值不会消失

第一种

{
  path: '/about',
  name: 'about',
  component: () => import('../views/AboutView.vue')
}

<router-link :to="{name: 'about', query: {id: 9999}}">About</router-link>
<router-link :to="{path: '/about', query: {id: 999, name: 'xx'}}">About</router-link>

// http://localhost:8080/about?id=999&name=xx

第二种

{
  path: '/about',
  name: 'about',
  component: () => import('../views/AboutView.vue')
}

<button @click="toAbout">query路由传参</button>

toAbout() {
  this.$router.push({
    // path: '/about',  path或者name都可以
    name: 'about',
    query: {
      name: 'hh2',
      age: 24
    }
  })
}