1. 程式人生 > >hash和history模式

hash和history模式

pat size tag seo spa 路由 href dex 統一

new router({
mode:‘history‘,

routes:[]
})

正常a標簽hash模式得href=‘#/home‘,
histroy模式用a標簽會跳轉鏈接刷新頁面,這是因為a標簽的默認行為

解決方式:用<router-link to=‘/home‘></router-link>(不管是hash還是history都支持)

<router-link></router-link>的參數

:to=‘index‘

:to=‘{path:‘/home‘,component: home}

tag=‘li‘生成鏈接導航的標簽

<router-link tag="li">

  <i></i>
  <span>home</span>

</router-link>

鏈接被激活時的樣式

<router-link activeClass=‘activeClass‘></router-link>

new router({

linkActiveClass:‘is-active‘

})

激活樣式到對應的鏈接(當有設置根路由時,點擊別的鏈接,和根目錄對應組件相同的那個鏈接一直未激活狀態),加上exact便解決了

<router-link exact></router-link>

切換事件

<router-link event=‘mouseover‘></router-link>

被渲染的組件統一加的樣式

<router-view class="center"></router-view>

hash和history模式