vue-路由传参和编程式跳转3--（params传参和query传参的区别、编程式跳转this.$router.push）

params传参和query传参

是路由传参的两种常见形式。区别在于

• query传参，参数在url中可见，是标准的url传参形式。使用?分割参数和url地址
• params传参，参数在url默认是不可见的。除非设置了占位符
• query传参不怕刷新，刷新之后参数还在
• params传参除非设置了占位符，否则参数不能再刷新之后保存

编程式跳转

使用this.$router.push(路由对象)实现跳转

List.vue

<template>
  <div class="home">
    <h1>我是列表页</h1>
    <ul>
      <li v-for="item in list" :key="item.id">
        <!-- query传参可以在url中传递，可以传递多个。刷新页面之后参数还在 -->
        <!-- params传参不会再url中显示，当浏览器刷新之后参数消失。
        如果想让参数一直存在，需要在路由中配置占位符-->
        <router-link
          :to="{name: 'Detail',
            query: {
              id: item.id,
              name: item.name,
              r: Math.random()
            },
            params: {
              p: '小智',
              age: 8,
              skills: '暂无'
            }}"
        >{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '沈剑心' },
        { id: 2, name: '郭德友' },
        { id: 3, name: '郭德纲' }
      ]
    }
  }
}
</script>
<style scoped>
.home {
  background-color: orange;
}
</style>

main.js

detail.vue

notfound.vue