路由元信息的使用和路由传递参数

1.例如我们要显示一个Footer组件，但是我们希望它只有在登录或者主页才显示，那么可以有以下几种方法：

<Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>

例如上述这段代码，意思就是我们只有在路由转到home或者search上的时候，才显示成功，那么就可以用v-show的形式进行转换

2.那么以上这种方法可能在实际运用的时候，是不具有实际的广泛运用性质的，那么这个时候就可以利用路由元信息，在routee里面的index.js当中配置

export default new VueRouter({
    routes:[
        {
            path:"/home",
            component:Home,
            meta:{
                show:true
            }
        },
        {
            path:"/search",
            component:Search,
            meta:{
                show:true
            }
        },
        {
            path:"/login",
            component: Login,
            meta:{
                show:false
            }
        },
        {
            path:"/register",
            component: Register,
            meta:{
                show:false
            }
        },
        {
            path:"*",
            redirect:"/home"
        }
    ]
})

然后在App.vue当中配置

    <Footer v-show="$route.meta.show"></Footer>

 这样子就可以直接通过操作路由里面的配置进行页面的显示了

3.路由传递参数

在传递路由参数的时候，需要传递params参数以及query参数

下面是几种重要的写法：

可以先在要跳转的路由前面加上一个name属性

        {
            path:"/search/:keywords",
            component:Search,
            meta:{
                show:true
            },
            name:"search"
        }

在指定了name属性之后，在传递路由参数的时候，可以有以下几种写法

    methods:{
        goSearch(){
            // 字符串形式
            // this.$router.push('/search/'+this.keywords+"?"+this.keywords.toUpperCase())
            // 模板字符串形式
            // this.$router.push(`/search/${this.keywords}?k=${this.keywords.toUpperCase()}`)
            // 对象形式写法
            this.$router.push({name:"search",params:{keywords:this.keywords,query:{keywords:this.keywords.toUpperCase()}}})

        }