国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【Vue】六：路由（上）使用路由多級路由

2年前作者：Beyong2019分類：Toy博客閱讀(18)違法舉報

這篇具有很好參考價值的文章主要介紹了【Vue】六：路由（上）使用路由多級路由。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1.多頁面應用

2. 單頁面應用（使用路由）

（1）安裝vue-router插件

vue2 要安裝 vue-router3
npm i vue-router@3
vu3 要安裝 vue-router4
npm i vue-router@4

（2）main.js 中引入并使用 vue-router
new Vue 時添加新的配置項：一旦使用了 vue-router 插件，在 new Vue 的時候可以添加一個全新的配置項：router
【Vue】六：路由（上）使用路由多級路由

（4）router 路由器的創(chuàng)建一般放在一個獨立的 js 文件中，例如：router/index.js
【Vue】六：路由（上）使用路由多級路由
（5）編寫router
【index.js】

（6）使用 router-link 標簽代替 a 標簽（App.vue 中）
【App.vue】

<router-view></router-view>為一個占位符，指定組件最終展示的位置。

（7）測試
【Vue】六：路由（上）使用路由多級路由

3. 多級路由

子組件：【shijiazhuang.vue】

【Vue】六：路由（上）使用路由多級路由

父組件：【hebei.vue】

【Vue】六：路由（上）使用路由多級路由
路由【index.js】

【Vue】六：路由（上）使用路由多級路由

【Vue】六：路由（上）使用路由多級路由
注意：一般普通組件存放在components中，路由組件存放在pages中。
文章來源地址http://www.zghlxwxcb.cn/news/detail-478767.html

到了這里，關于【Vue】六：路由（上）使用路由多級路由的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！

本文來自互聯(lián)網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處：如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經查實，立即刪除！

分享到：

領支付寶紅包贊助服務器費用

「Vue｜網頁開發(fā)｜前端開發(fā)」02 從單頁面到多頁面網站：使用路由實現(xiàn)網站多個頁面的展示和跳轉
本文主要介紹如何使用路由控制來實現(xiàn)將一個單頁面網站擴展成多頁面網站，包括頁面擴展的邏輯，vue的官方路由vue-router的基本用法以及擴展用法「Vue｜網頁開發(fā)｜前端開發(fā)」01 快速入門：快速寫一個Vue的HelloWorld項目我們在進行網站開發(fā)的時候，大多數(shù)都是需要有多個頁面
2024年02月11日
瀏覽(24)
Vue3 - 實現(xiàn)路由 “新開一頁“ 進行頁面跳轉功能，Router 路由跳轉時在新窗口打開頁面（網站跳轉頁面時瀏覽器新開頁簽打開網頁，支持在頁面、純 js/ts 文件中使用，詳細示例代碼教程）
網上這方面教程很少，本文提供多種解決方案，適用于任何場景。本文實現(xiàn)了在 vue3 項目開發(fā)中，當頁面跳轉時瀏覽器打開新窗口（新頁簽）跳轉，Router 路由跳轉并新開一頁教程，無論您是在普通頁面、純 js/ts 文件中，都可以使用，如下圖所示，當執(zhí)行路由跳轉時瀏覽器
2024年02月03日
瀏覽(32)
vue頁面路由的原理
47. vue頁面路由的原理 1. 原理 Vue 中的路由原理是基于瀏覽器的 history API 和 Vue 的路由插件 Vue Router 實現(xiàn)的。具體來說，當瀏覽器接收到一個新的路由請求時，會發(fā)送一個 HTTP 請求到服務器，服務器會根據(jù)請求的 URL 返回相應的 HTML 文件。在 Vue 中，我們可以使用 vue-router 插件
2023年04月24日
瀏覽(13)
vue單頁面實現(xiàn)路由跳轉后保留原頁面數(shù)據(jù)
有時候在路由跳轉后，返回原頁面時需要保留之前的數(shù)據(jù)，即不銷毀頁面。頁面的緩存，需要用到vue的內置組件keep-alive，來緩存列表頁面，同時配合路由選項來更改頁面的數(shù)據(jù)。在設置keep-alive緩存的組件中，首次進入組件，會一次調用組件的鉤子函數(shù)：created -- mounted --ac
2024年02月15日
瀏覽(22)
vue2路由跳轉頁面
前端工作筆記之---頁面路由跳轉vue2 前言 1.安裝vue-router 2.配置路由在src文件夾下創(chuàng)建router文件夾，然后在router文件夾下創(chuàng)建index.js文件，如下圖在index.js文件夾中進行配置 ?在src文件夾下創(chuàng)建view文件夾，在里邊放路由文件，如下圖 ?在main.js文件中注冊路由接下來就是使用啦
2024年02月06日
瀏覽(21)
vue3回到上一個路由頁面
Vue Router獲取當前頁面由哪個路由跳轉在Vue3的setup中如何使用this beforeRouteEnter 在這個路由方法中不能訪問到組件實例this，但是可以使用next里面的vm訪問到組件實例，并通過vm.$data獲取組件實例上的data數(shù)據(jù) getCurrentInstance 是vue3提供的獲取組件實例的方法，可通過getCurrentInstanc
2024年02月05日
瀏覽(25)
vue路由跳轉后，刷新指定頁面。
????????做項目遇到一個坑：A頁面帶參跳轉到B頁面，第二次跳轉時的參數(shù)與第一次時的參數(shù)不同，但是后臺查詢時還是使用的第一次的參數(shù)。需要手動刷新之后，才會使用第二次參數(shù)。 ? ? ? ? 鑒于時間原因直接使用刷新頁面監(jiān)聽路由的方法。在準備跳轉的A頁面添加路
2024年02月12日
瀏覽(34)
Vue頁面路由參數(shù)的傳遞和獲取
vue 頁面路由切換時傳參的方式有如下幾種：動態(tài)路由參數(shù) 它隱藏字段信息，相對于來說較安全，同時地址欄中的地址也相對較短它必須是先定義后使用，一般用于根據(jù)固定參數(shù)，返回對應的數(shù)據(jù)所用 query字符串 ?id=1 通過search字符串的方式來在地址欄中傳遞數(shù)據(jù)，相對于來
2024年02月11日
瀏覽(17)
Vue3使用遞歸組件封裝El-Menu多級菜單
2024年02月09日
瀏覽(33)
vue 動態(tài)路由刷新失效及404頁面處理
在開發(fā)后臺管理項目，我們會使用vue動態(tài)路由做權限管理，但是使用vue動態(tài)路由時會遇到一些坑，這里總結一下，并提供解決思路問題：刷新頁面時會把addRouter添加的動態(tài)路由刷新掉，因此瀏覽器找不到之前添加的路由，便會進入白屏頁面或者404頁面處理方式：判斷是否刷
2024年02月12日
瀏覽(29)