vue實現路由跳轉和嵌套(快速入門)


        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、在路由指向是注意路徑

 


免責聲明!

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



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