vue路由

1.hash模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

2.history 模式

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。history 模式需要后台配置支持

3.路由的原理
用户可以通过手动输入或者与页面进行交互来改变 URL，然后通过同步或者异步的方式向服务端发送请求获取资源（当然，资源也可能存在于本地），成功后重新绘制 UI，

zhuanlan.zhihu.com/p/20381597?…

4.路由传参数

方式一:
  通过params
       1.路由表中      
             <Route path=' /sort/:id '   component={Sort}></Route>
　　　　　　　　　　　
       2.Link处        
           HTML方式
                <Link to={ ' /sort/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>          　　　　
　　　　　　　　　　　
         JS方式
               this.props.history.push(  '/sort/'+'2'  )
　　　　　　　　　　　
       3.sort页面       
              通过  this.props.match.params.id      
              就可以接受到传递过来的参数（id）
　　　　　　　　　　　
  方式 二：
        通过query
               前提：必须由其他页面跳过来，参数才会被传递过来
　　　     注：不需要配置路由表。路由表中的内容照常：
       <Route path='/sort' component={Sort}></Route>
       1.Link处      
        HTML方式
           <Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>
　　　　　　　　　　
      JS方式
           this.props.history.push({ path : '/sort' ,query : { name: ' sunny'} })

       2.sort页面     
             this.props.location.query.name
                               
    方式 三：
       通过state
           同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公
           开的，在地址栏
       1.Link 处      
         HTML方式：
               <Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
                               　　
        JS方式：
           this.props.history.push({ pathname:'/sort',state:{name : 'sunny' } })
                             　　  
       2.sort页面       
           this.props.location.state.name
   ```        
复制代码