阅读 254

vue路由

1.hash模式

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

2.history 模式

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

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

截屏2021-06-13 下午12.07.00.png 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
   ```        
复制代码
文章分类
前端
文章标签