vue-router路由的原理是通過改變網址,來實現頁面的局部刷新,相比a標簽跳轉的不同之處在於,路由跳轉不需要刷新整個頁面。
一、路由跳轉
1、安裝路由vue-router:
npm install vue-router
2、vue項目引入vue-ruoter:
3、配置路由(頁面跳轉):
可以建一個專門用於路由的js文件,里面配置路徑。
1)router.js路由配置文件
2)main.js里引入router.js路由文件
4、組件里調用
1)使用router-view標簽給vue組件的跳轉提供一個容器
2)使用router-link標簽實現跳轉(它類似於a標簽,區別在於router-link跳轉不需要刷新頁面)
方法一:to里填寫的是跳轉的路徑,即定義路由時的path路徑
方法二:to里使用路由名稱name跳轉
跳轉至table組件:
3、實現效果
項目的首頁:
點擊table后跳轉:
(完成)
二、路由嵌套
1、配置嵌套路由
2、組件中嵌套使用<router-view></router-view>
1)一級路由
2)二級路由
3)三級路由
3、實現效果
路由嵌套重點:
1、在router中層級要嵌套
2、在路由指向是注意路徑