查询传参 （多值）

<router-link to="/search?name=黑暗深林&author=大刘"></router-link>

<!-- $route.query.name-->

动态路由传参 （方便）

<router-link to="/search/黑暗深林></router-link>

<!-- 配置路由的path:"/sezrch/:words"-->

<!-- $route.params.words-->

重定向

redirext:重定向路径，也就是强制跳转到这个路径

routes:[
    {path: '/' ,redirect: 'search'},
    {path: '/search' ,component: SearchWord}
]

路由跳转

//这里是$router别写错了
this.$router.push('路由路径')
this.$router.push({    //可以查询传参
    path: '路由路径',
    query: {
        参数名: '参数值'
    }
})
this.$router.push({    //还可以动态路由传参
    path: '路由路径/参数值',
})


//当然如果嫌弃路径太长，也可以给路由取名字
routes:[
    {path: '/' ,redirect: 'search'},
    {name: 'sh', path: '/search' ,component: SearchWord}
]

this.$router.push({
    name: 'sh'
})

组件缓存

由于路由跳转后，组件会被销毁，等待返回又重新重建，这样会导致数据重新加载

<div>
<!-- 把切换的组件保存在内存，防止重新渲染-->
<!--
include: 只有匹配的组件会被缓存
exclude: 匹配到的组件不会被缓存
max: 最多缓存多少组件
-->
    <keep-alive include="组件名">
        <router-view></router-view>
    </keep-alive>
</div>