vue-router原理

• 1、vue-router 只在vue中使用
• 2、router-view 的作用

占位，监听url变化，根据url组件对应关系更新占位处的组件  
在new VueRouter()时通过routes参数 url和组件建立对应关系
router-view通过render实现，根据url变量的实时变化切换组件
router-view、router-link、$router是通过vue.use(VueRouter) install方法注入

• 3、router-link 和a标签

touter-link a标签封装，to对应href,点击禁止默认行为，通过映射找到对应组件

• 4、vue-router单页面无刷新
• 5、hash、history、ssr渲染的abstract

hash通过监听hasChange：点击页面不刷新、兼容性好

history通过监听H5的history，pushState 有history.back()、history.forward()、history.go（）。：url美光，考虑ie9以下兼容

abstract ：一般要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就是abstract这种与浏览器分离的路由模式

• 6、new vue的时候传入router实例（要看源码）
• 7、路由传参

# 1  **params传参（显示参数）**  （刷新页面，参数还在）  在路径中显示参数，在配置路由时，需要占位
    
    path: '/search/:keyword?'
     声明式导航 
    * <router-link :to="/search/123">搜索</router-link>
    编程式导航
    This.$router.push({'/search/keyword'})
    
# 2  **params传参（不显示参数）** （刷新页面，参数不在）   在路径中不显示参数，在配置路由时，不需要占位，但是需要name
    <router-link :to="{name:'search',params:{keyword:123}}">搜索</router-link>
    
    This.$router.push({

        ​ name:'search',

        ​ params:{ keyword:123 }

    })
# 3 **query传参** 不需要设置占位
    <router-link :to="{path:'/search',query:{keyword:123}}">搜索</router-link>
    
    This.$router.push({

    ​ path:'/search',

    ​ query:{ keyword:123 }

    })