码迷,mamicode.com
首页 > 其他好文 > 详细

【vue】router-link 与 router-view

时间:2018-08-22 01:18:05      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:映射   渲染   useradd   world   add   应用   更改   pat   写法   

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 映射过来的组件。

【vue】router-link 与 router-view

标签:映射   渲染   useradd   world   add   应用   更改   pat   写法   

原文地址:https://www.cnblogs.com/dongzhuangdian/p/9515307.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!