router-link和router-view是如何起作用的

總結路由的router-link和router-view的區別

1.router-link和router-view的區別

vue-router中的兩個重要組件，分別起到路由導航和組件內容渲染的作用

2.router-link的路由導航

router-link默認生成一個a標籤，設置to屬性定義跳轉path，實際上也可以通過custom和自定義最終的展現形式。組件內部格局custom屬性判斷如何渲染最終生成節點，內部提供導航方法navigate，用戶點擊之後實際調用的是該方法，此方法最終會修改響應式的路由變量，然後重新去routes匹配出書組結果，router-view則根據其所處的深度deep在匹配數組結果中找到對應的路由並獲取組件，最終將其渲染出來。下面是使用案例。

1.跳转同一级的路由页面，相当于a标签直接跳到新页面，无需router-view占位符

<router-link to="/home" tag="button">頁面跳轉到/home新頁面</router-link>

2.在上一级中显示下一级路由（children），不跳新页面，需占位符，类似微信开发中的@uniSegmentedControl分段器

<div>
    <router-link to="/home/new1" tag="button">我是home页面中的new1内容</router-link>
    <router-link to="/home/new2" tag="button">我是home页面中的new2内容</router-link>
</div>
  <router-view></router-view> //不發生跳轉，這裡更新組件視圖

2.router-view的組件內容渲染作用

router-view是要顯示組件的占位組件，可以嵌套，對應路由匹配的嵌套關係，配合name可以顯示具名組件，起到更強的佈局作用。
使用案例參考上面router-link的案例2