路由参数

之前的router-link的to参数，是一个地址

此时我们可以进行参数配置，我们的路由不仅可以添加路由地址，还可以携带路由参数

path和query

我们可以通过to参数传入一个对象

<template>
    <div>
        <!--显示区域-->
           <router-link :to="{path:'/home',query:{a:1,b:2,c:3}}"   tag="li">点击跳转到home</router-link>
             <router-link to='/sport'  tag="li">点击跳转到sport</router-link>
        <router-view></router-view>
    </div>
</template>

此时我们可以看到点击后的路由，会携带相关的参数

 

 

path里面放的路径，query接收的是一个对象，内部的是配置的参数

 

 name和params

我们可以通过to参数传入一个对象

<template>
    <div>
        <!--显示区域-->
           <router-link :to="{path:'/home',query:{a:1,b:2,c:3}}"   tag="li">点击跳转到home</router-link>
             <router-link :to="{name:'sport', params:{a:2,b:3,c:4}}"  tag="li">点击跳转到sport</router-link>
        <router-view></router-view>
    </div>
</template>

 

如果使用了name和params组合，在router.js中就要进行相关的name配置

let router=new vueRouter({
    linkActiveClass:'is-active',
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/sport',
            name:'sport',
            component:Sport
        }
    ]
})

点击跳转后，浏览器上没有相关参数，但是实际上，携带了相关的参数，我们可以监听$route的相关参数

 

我们配置一个watch监听事件来查看 

<script>
    export default {
        watch:{
                $route(val){
                    console.log(val)
                }
            }
    }
</script>

 

 

监听$route的结果

 

 

比较：name和path这两种跳转方式，其实就是模仿了get和post请求，两者各有优点，一个是name方式由于是post形式的跳转，所以刷新之后参数会丢失，但是保密性好；path方式刷新页面不会丢失参数，但是保密性差