【Vue】router-link 與 router-view


1 router-link

<router-link :to="{ path: '/hello', component: HelloWorld }">hello</router-link>
<router-link :to="{ path: '/user/useradd' }">user</router-link>

以上是兩種寫法,根據參數還會有更多中寫法。

經過測試:(1)有component參數時優先router-link中配置的component,沒有時從js中配置取

     (2)path參數至關重要,靈活所在,/user/useradd 實際匹配了兩個組件,分別是user和useradd

k    { path: '/user', component:user,
      children:[
        {path:'/user/useradd', component:useradd},
        {path:'/user/userdelete', component:userdelete}
      ]
    }

 

2 router-view

<router-view> 是用來渲染通過路由映射過來的組件,當路徑更改時,<router-view> 中的內容也會發生更改

  <router-link :to="{ path: '/hello', component: HelloWorld }">hello</router-link>
  <router-link :to="{ path: '/user/useradd' }">user</router-link>
  <router-view/>

當前看主要應用於單頁面中,與router-link配合,渲染router-link 映射過來的組件。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM