路由元信息：

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段：

官网：

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false }
      }
    ]
  }
]

这样我们访问某一个路由时，就可以通过meta去访问它的路由信息由此可见，我们加上这个属性后，$route就有了meta这个属性，在很多时候，各个页面呈现的组件不一样，所以我们需要控制路由的显示与隐藏，这个时候我们可以在路由元信息写入控制显示与隐藏的show(因为vue是0dom操作，所以不太喜欢用v-if，v-if会对dom树进行操作，会更多的消耗资源）
一般来说，
$router是在编程式导航会用到，比如上次说到的路由跳转(push或者replace)
$route是包含这个路由的所有信息，比如刚刚添加的meta属性，还有params参数以及query参数，所以可以通过图上这种方法去控制组件的显示与隐藏

路由传参：

我们这里重点介绍使用对象传参这种方式，因为它在开发过程中更为常用
使用步骤：

首先在目标组件中写入name属性，这种方式我试了一下不用占位，还挺方便的

这样这个路由组件就有了name这个属性，下一步就可以进行传参了

  this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword}})

哇，这个也太方便了，根本不用考虑连接参数等问题，一步到位
可能会有人问：这个name能不能换成path，这个也是很多公司面试会问到的问题，答案是不可以，换成path会报错

<template>
    <div>我是脚部
        <input type="text" v-model="keyword">
        <button @click="goSearch">跳转到搜索页面</button>
        <h1>{{this.keyword}}</h1>
    </div>
   </template>
<script>
export default{
  name:"",
  data(){
      return{
          keyword:''
      }
  },
  methods:{
     goSearch(){
    this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword}})
     }
  }
}
</script>

结果