話說前端59-router

learningyard學苑 發佈 2023-05-01T08:37:05.587867+00:00

Route passing parameters: There are two ways to pass parameters in route jump of vue-router: one is route parameters, and the other is to pass parameters by defining dynamic route passing parameters。

分享興趣,傳播快樂,增長見聞,留下美好!

親愛的您,這裡是LearningYard新學苑。

今天小編為大家帶來話說前端59,歡迎您的訪問。

Share interests, spread happiness, increase knowledge, and leave a good legacy!

Dear you, this is The LearningYard Academy.

Today Xiaobian brings you the Knowledge Collection | Logistics Operation Management (59), welcome to your visit.

嵌套路由:嵌套路由是個常見的需求,假設用戶能夠通過路徑/home/news和/home/message訪問一些內容,一個路徑映射一個組件,訪問這兩個路徑也會分別渲染兩個組件。實現嵌套路由有兩個要點:在組件內部使用<router-view>標籤,在路由器對象中給組件定義子路由。

Nested routing: Nested routing is a common requirement. Assuming that users can access some content through paths /home/news and /home/message, one path maps one component, and accessing these two paths will render two components respectively. There are two main points in implementing nested routing: using the < router-view > tag inside the component and defining child routes for the component in the router object.

動態路由匹配:在某些情況下,一個頁面的path路徑可能是不確定的,比如我們進入用戶界面時,希望是如下的路徑:/user/aaaa或/user/bbbb

除了有前面的/user之外,後面還跟上了用戶的ID,這種path和Component的匹配關係,我們稱之為動態路由(也是路由傳遞數據的一種方式)。

Dynamic route matching: In some cases, the path of a page may be uncertain. For example, when we enter the user interface, we want the following path: /user/aaaa or /user/bbbb.

In addition to the front /user, the user's ID is followed. This matching relationship between path and Component is called dynamic routing (which is also a way of routing data).


路由傳參:vue-router的路由跳轉時傳遞參數有兩種方式:一種是路由參數, 通過定義動態路由傳遞參數(params)另一種是通過query來傳遞參數。

我們已經學習過的,路由的跳轉主要有兩大類:<router-link>組件的to跳轉 創建路由實例,並且傳入路由映射配 編程是導航,通過js命令進行跳轉因此兩種跳轉方式, 組合兩種傳參方式, 就會組合出四種不同的寫法。

$route &router的區別: $router為VueRouter實例,想要導航到不同URL,則使用$router.push方法。$route為當前router跳轉對象裡面可以獲取name、path、query、params等

Route passing parameters: There are two ways to pass parameters in route jump of vue-router: one is route parameters, and the other is to pass parameters by defining dynamic route passing parameters (params)

As we have learned, there are two main types of routing jumps: the to jump of the < router-link > component creates routing instances, and the incoming routing mapping programming is navigation, and the jump is made through the js command. Therefore, the combination of the two jump methods and the two parameter passing methods will combine four different writing methods.

The difference between $ route and router: $router is an instance of VueRouter. If you want to navigate to a different URL, use the $router.push method. $route is the current router jump object, which can get name, path, query, params, etc.


今天的分享就到這裡了。如果您對今天的文章有什麼獨特的想法,歡迎評論留言,讓我們相約明天,祝您今天過得開心快樂!

That's it for today's sharing. If you have any unique ideas for today's article, please leave a comment, let us meet tomorrow, I wish you a happy day!

參考資料:《物流運作管理》,董千里著。

翻譯:Google翻譯

本文由LearningYard新學苑原創,如有侵權,請聯繫刪除。

文字&排版|橙貓貓

審核|李煥

關鍵字: