這篇文章主要介紹了vue3.0 CLI - 3.2路由怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于茂南網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供茂南營銷型網(wǎng)站建設(shè)，茂南網(wǎng)站制作、茂南網(wǎng)頁設(shè)計(jì)、茂南網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造茂南網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供茂南網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

動(dòng)態(tài)路由

在路由某部分里加入[ : ]，就成為動(dòng)態(tài)路由如：/user/:id/，那么路由導(dǎo)航，并不是  /user/id/ 而是 /user/666/。

顯然這個(gè) id 能被獲取，在組件中使用。通過 this.$route.params 獲取。 this 是當(dāng)前組件，$route 是路由對象，params 是一個(gè)對象字面量 { id:666 }。

$route 通過 Vue.use(Router) 和 new Vue({ router, store, render: h => h(App) }).$mount('#app') 全局依賴注入，在所有組件中都可以使用它。

1、router.js 中 path: '/about' 路由 改為 path: '/about/:id'。

2、About.vue 中 <top-nav title="軍事" :class="{ active: isActive }"/> 添加紅色部分。

3、About.vue 中 data 或者 computed 屬性中添加 isActive: function () { return this.$route.params.id === "666"; }

4、App.vue 中 <router-link to="/about/666">VUE</router-link>

5、About.vue 中 <style lang="less"> .active { background: red; } </style>

保存點(diǎn)擊【VUE】導(dǎo)航按鈕，即可見到效果：

如何取得 $route 中參數(shù)的值，便是很大的進(jìn)步。這個(gè)參數(shù)可以用在任何地方，可以用來做任何事情。

比如傳遞數(shù)據(jù)，根據(jù)路由參數(shù)動(dòng)態(tài)從服務(wù)器獲取組件內(nèi)容等

在進(jìn)行下一個(gè)內(nèi)容學(xué)習(xí)之前，commit 一下。

嵌套路由(子路由)

在頁面，通常存在多級導(dǎo)航。vue 官方網(wǎng)站便是多級導(dǎo)航的例子：頂部為一級導(dǎo)航欄，左側(cè)為二級導(dǎo)航欄。

導(dǎo)航通常對應(yīng) <router-link> 而 <router-link> 與 <router-view/> 對應(yīng)。

并非只有 App.vue 中才能存在 <router-view/>， 任何組件都可以。

下面把 HelloWorld.vue 變?yōu)?About.vue 的子路由：

1、<HelloWorld msg="vue 官方相關(guān)資料的鏈接"/> 替換為  <router-view/>

2、router.js 中關(guān)于 About.vue 組件的路由 替換為

 {
  path: '/about/:id',
  name: 'about',
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  children: [
  {
   path: '1',
   component: HelloWorld,
   props: (router) => ({
   msg: router.query.msg
   })
  }
  ]
 }

在瀏覽器地址欄輸入 http://localhost:8081/#/about/666/1?msg='welcome to nDos blog' 查看效果。

編程式導(dǎo)航與路由命名

在 vue 初始化的工程中，路由配置時(shí)，組件都已做好命名。這便是路由命名。

編程式導(dǎo)航，盡量使用命名的路由，如下：

router.push({ name: 'about', params: { userId: 123 }})

因?yàn)槭褂?path 屬性進(jìn)行編程式導(dǎo)航，params 無效。

這樣使用路由跳轉(zhuǎn)，使得單頁面編程的路由跳轉(zhuǎn)更加靈活。比如某個(gè)跳轉(zhuǎn)按鈕，可以綁定函數(shù)，進(jìn)行條件跳轉(zhuǎn)。

關(guān)于這兩個(gè)的內(nèi)容并不多，參照官網(wǎng)教程學(xué)習(xí)。

命名視圖

在一個(gè)組件中，如果有多個(gè)組件出口，比如：在某個(gè)頁面，需要同時(shí)展示很多個(gè)組件時(shí)。

只有一個(gè) <router-view/> 顯然不能滿足需求。

多個(gè) <router-view/> 同時(shí)存在的時(shí)候，就必須要加以區(qū)分，用的是 name 屬性：<router-view name="a"/>

在 router.js 中的 components 屬性中，添加多個(gè)組件即可 ( 到這里才明白為什么 components 為什么是復(fù)數(shù)形式的寫法  )。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue3.0 CLI - 3.2路由怎么用”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

標(biāo)題名稱：vue3.0CLI-3.2路由怎么用
當(dāng)前地址：http://www.chinadenli.net/article28/iijecp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、ChatGPT、企業(yè)網(wǎng)站制作、網(wǎng)站排名、網(wǎng)頁設(shè)計(jì)公司、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)