A. vue之router-view組件的使用及二級路由
以餓了么訂餐的情景來說吧，在同個頁面，切換顯示不同組件的相應內容，同時地址欄的地址是會變的
B. vue-router
路由，其實就是指向的意思，當我點擊頁面上的home按鈕時，頁面中就要顯示home的內容，如果點擊頁面上的about 按鈕，頁面中就要顯示about 的內容。Home按鈕 => home 內容， about按鈕 => about 內容，也可以說是一種映射. 所以在頁面上有兩個部分，一個是點擊部分，一個是點擊之後，顯示內容的部分。
C. Vue.js 2.0 vue-router怎麼設置路由
Vue.js 2.0 vue-router路由器設置方法步驟如下：
1、首先把電源接通，然後插上網線，進線插在wan口，然後跟電腦連接的網線就隨便插一個lan口。
2、連接好無線路由器後，在電腦瀏覽器地址欄輸入在路由器IP地址:192.168.1.1。
3、連接後會看到輸入相應的登陸用戶名：admin，密碼：admin。
4、進入操作界面，點擊設置向導。
5、進入設置向導的界面，選擇進入上網方式設置。
6、點擊下一步，進入上網方式設置，可以看到有三種上網方式。如果是撥號的話那麼就用PPPoE。動態IP一般電腦直接插上網路就可以用的，上層有DHCP伺服器的。靜態IP一般是專線什麼的，也可能是小區帶寬等，上層沒有DHCP伺服器的，或想要固定IP的。
7、選擇PPPOE撥號上網就要填上網帳號和密碼。
8、然後點擊下一步後進入到的是無線設置，可以看到信道、模式、安全選項、SSID等等，一般SSID就是一個名字，可以隨便填，然後模式大多用11bgn.無線安全選項，要選擇wpa-psk/wpa2-psk,這樣安全，免得輕意讓人家破解而蹭網。點擊下一步就設置成功。
9、點擊完成，路由器會自動重啟，屆時就完成了路由器設置工作。
D. vue router 怎麼配置
importVuefrom'vue'
importRouterfrom'vue-router'
//先引入vue和router
//再引入對應的路由的模板
importloginfrom'@/components/login'
importhomefrom'@/components/home'
importhome1from'@/components/home1'
importhome2from'@/components/home2'
//注入依賴
Vue.use(Router)
Vue.use(vueResource)
//配置路由
exportdefaultnewRouter({
routes:[
{//可以直接使用path訪問該路由也可以使用name
path:'/',
name:'login',
component:login//上面引入的模板
},
{
path:'/home',//home頁面有兩個子組件分別為home1和home2
component:home,
name:'home',
redirect:'/home/home1',
children:[
{
path:'/home/home1',
component:home1,
name:'home1'
},
{
path:'/home/home2',
component:home2,
name:'home2'
}
]
}
]
})
E. vue3實踐---路由router
具體的項目創建這里就不說了，直接參考官方文檔就夠了： 安裝 | Vue.js (vuejs.org)
不得不說，vite 是真滴強，速度比起webpack 快了好幾倍，用過就真的回不去了。本次的實踐是實現一個常見的後台管理系統，細節會盡量跳過，只集中在路由上面去展示和記錄。
首先整個頁面就是一級路由，通常會有登錄頁，報錯頁，主頁之間的切換，這里也是做路由切換動畫的主要地方。當頂部有導航菜單的時候紅色框就是二級路由，以此類推綠色框就是三級路由。
創建好vue3項目的第一步就是安裝vue-router ,因為vite 默認並沒有安裝的。參考官網： 安裝 | Vue Router (vuejs.org)
然後在src 目錄下創建router目錄，並添加2個文件index.js,routes.js.
這里就要畫重點了。因為vue3的過度動畫transition組件跟vue2比變化還是比較大的。主要是以下的2各方面：
1.transition組件在vue 2 中是作為父級包裹路由router-view 的，到了vue3就反過來了
2.動畫類名發生了一點變化，開始和結束變成了from 和 to ，所以不能直接吧vue2的過度動畫復制過來，需要做一些改動。
F. vue2.0如何嵌套路由子路由怎麼配置
方法/步驟
我們先來解決上一次的tab路由切換效果激動class的問題!我們不想讓它點擊其它路由鏈接的時候第一個的路由class處於激活狀態.首先我們修改下min.js裡面的路由配置文件.加上首頁路由組件配置.紅色圈的地方意思是,默認進來顯示的路由路徑,還有一個就是直接配置默認的路由路徑,其實指向的都是同一個組件.
第二步,將導航的路由改動下.這里要注意的是,第一個router-link to不在是直接指向"/"了,而是"/home".然後我們在第一個路由內容的DIV上加一個動態class.用來判斷當前的路由路徑.寫一個三元表達式.$route是一個路由對象,所有的路由都被存在這個對象當中.我們只需要進行判斷當前路由是否指向home這個組件.如果是的話加上一個router-link-active如果不是的話就為空class.效果見第二張,第三張圖片.
此時一個完整的路由切換效果就完成了.接下來就分享下嵌套路由是怎麼弄的!首先找到min.js路由 配置文件.比如我們在home組件里加一個嵌套路由chi組件.首先要先創建這個chi組件,然後引入到min.js文件中.然後在home路由的裡面加上children這個方法.這樣,一個嵌套的子路由就配置好了.
到這里,在home組件中寫一個入口進入這個嵌套的路由組件中去.嵌套路由點擊進去,會進入到之前寫好的chi.vue組件中去.
點擊之後,就會顯示.home裡面的chi組件.並且顯示chi組件中的內容
G. vue怎樣構建單頁面應用中的二級頁面
你好君子空情90361，1. router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。
2. vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。
3. 傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。
4. 在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。
H. vue路由配置
首先，先來講個小東西吧。我個人一般在開發的時候都會將ESLint關閉掉。在新建一個項目的時候，會提示你安裝否。選擇n就行了。也就是no。見下圖！如果你不心安裝了。也沒事。在項目的配置文件中找到它注釋掉即可。
首先第一步，在components文件夾里新建兩個.vue文件。將用它們來路由頁面。並且分別取名router1.router2
接下來，我們就開始配置路由了。首先說幾個准備思路吧。第一：頁面打開後是要有默認顯示頁的（默認的路由），第二，同時實現路由切換時像JStab切換效果。接下來，我們要在app.vue里寫好2個導航命名為router1和router2。分別用來將router2,router1路由進來。（在這之前請把hello.vue的內容清空，才能看到現面第二張圖的效果）
現在基本的准備工作已經做好了。現在看到min.js文件。我個人的習慣是喜歡把路由的配置寫在這里或者引入到這里。不習慣放在router文件夾下面的index.js。請看下圖片。首先將。原始的router引入的改成VueRouter。然後引入之前新建好的兩個.vue文件。記得要use一下。最後創建一個router實例。第一個path / 表示的意思是默認路由進來的組件。也就是router1.
到了這里就差最後一步了。回到app.vue。寫上路由。分別給router1,router2加上路由標簽。router-link標簽渲染時會自動增加一個A標簽帶href路轉。後面的to='',就是將要路由到哪裡去的min.js中的path路徑。to="/"表示此處將路由顯示出min.js路由配置中path為/的component。最後，router-view標簽是將路由過來的組件渲染在什麼地方。這里寫在了導航下面。效果請看第二，第三張圖片。第二張圖片就是默認進來的路由頁面。也就是router1.地址欄中的路徑就是首頁。第三張圖地址欄中路徑變了，而且內容也變了。說明路由成功。
最後給路由的導航加上像JS一樣的tab切換效果。用到VUE路由中自有的類。router-link-active.意思是在路由激活時更變的class.看圖。在style中寫好css.頁面上就可以看到默認顯示的路由組件導航就有class了。不過此時，你已經成功了一半了。因為請看下面第三張圖片。當點擊router2的時候，出現了兩個紅色字體。這下尷尬了。
I. vue怎樣構建單頁面應用中的二級頁面
在路由當中設置子頁面就可以了。
路由可以設置多級頁面，子頁面在父頁面的子元素當中，配置好頁面地址就可以訪問了。