vue三十五:Vue-Router之動態路由和命名路由


 

動態路由:
1. 在url中,通過定義一個參數,那么以后url中就可以動態的傳遞這個參數。語法是:`/profile/:參數名`
2. 在組件中,可以通過`this.$route.params.參數名`拿到,或者是組件的模板中,可以通過`$route.params.參數名`拿到。
3. `this.$route`和`this.$router`的區別:
  * `this.$route`:代表的是當前這個路由里的一些信息集合。比如`params`,`query`,`fullPath`等。
  * `this.$router`:代表的是全局的`VueRouter`對象。

 

前面的都是固定的路由,如果有一個列表,數據是動態的,而需要給每一條數據都加鏈接,則需要動態路由來解決

 

解決方法:使用$router.push()添加動態路由

 

 

給Center組件創建二級路由和對應的組件

導入組件並創建路由

把Nplaying列表的跳轉路由改為/detail

 

配置路由參數:在列表的跳轉中,各列表的url一定就一個唯一參數不一致如id

把要跳轉的路由改為動態傳參

 

在路由配置中,改為接收參數

 

已經實現了動態路由傳參,現在要實現在組件中獲取傳過來的參數,進行處理

獲取參數

拿參數

 

命名路由

給定義的路由起個name,以后使用這個路由的時候,直接使用name就可以

使用

 


免責聲明!

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



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