1. 環(huán)境搭建——腳手架

npm init vue@latest => 選擇添pinia和router => 進(jìn)入項(xiàng)目文件夾 => npm i => npm run dev

2. 注冊(cè)路由

router/index.js中的routes下寫路由，例如：其中views文件夾中放路由對(duì)應(yīng)頁(yè)面的文件

? ? {
      // 路由名
? ? ? path: "/playLists",
      // 懶加載組件
? ? ? component: () => import("../views/playLists/index.vue"),
? ? },

3. 頁(yè)面跳轉(zhuǎn)

3.1 聲明式導(dǎo)航跳轉(zhuǎn)標(biāo)簽

使用：<router-link to="/car">購(gòu)物車</router-link>

與a標(biāo)簽區(qū)別：a標(biāo)簽會(huì)重新請(qǐng)求網(wǎng)絡(luò)（瀏覽器功能）；router-link標(biāo)簽只是跳轉(zhuǎn)，不會(huì)發(fā)起網(wǎng)絡(luò)請(qǐng)求（底層是a標(biāo)簽，但阻止了a標(biāo)簽的默認(rèn)事件），使用a標(biāo)簽名來設(shè)置css樣式

當(dāng)需要訪問其他網(wǎng)站時(shí)，用a標(biāo)簽；如果訪問的還是當(dāng)前服務(wù)器上的頁(yè)面，就用router-link標(biāo)簽

3.2 編程式導(dǎo)航跳轉(zhuǎn)

主頁(yè)面引入：import { useRouter } from 'vue-router'? 使用：router.push('/路由');

跳轉(zhuǎn)頁(yè)面引入：import { useRoute } from 'vue-router'

3.3 跳轉(zhuǎn)頁(yè)面時(shí)傳參

a. query傳參 => router.push({ name: 路由名/ path:路由名 , query: { 傳的參數(shù)?} })? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????????????????或?通過？拼接來傳參 router.push('/路由名?key=value'); ?//

? ? ? ? ? ? ? ? ? ? ?目標(biāo)頁(yè)獲取 => useRoute().query.參數(shù)的屬性名

b. 動(dòng)態(tài)路由傳參 =>?router.push({ name: 'login', params: { 傳的參數(shù)?} });

????????注：注冊(cè)路由：path:'/網(wǎng)址:變量名' 必須注冊(cè)路由的name?

? ? ? ?????????目標(biāo)頁(yè)面獲取參數(shù) => useRoute().params.參數(shù)的屬性名

注：vue框架中，兩種傳參方式都可以在網(wǎng)址中看見

4. 路由嵌套——子路由

實(shí)現(xiàn)切換效果（CSS、v-if/v-for、動(dòng)態(tài)組件component、子路由）

寫在父路由里面，作為children屬性的值，例如：

{
  path: "/shopdetail",
  // 路由名
  name: "shopdetail",
  component: () => import("../views/shopdetail/index.vue"),
  children: [
    {
       path: "/shopdetail/shop1",
       name: "shop1",
       component: () => import("../views/shopdetail/views/shop1.vue"),
    },
    {
       path: "/shopdetail/shop2",
       name: "shop2",
       component: () => import("../views/shopdetail/views/shop2.vue"),
    },
  ],
},

5. 重定向——redirect

當(dāng)用戶輸入某個(gè)路由時(shí)，重新更改路由地址.。例如：

// 重定向 用戶輸入/shopdetail時(shí)，將路由改成/shopdetail/shop1
redirect: "/shopdetail/shop1",

6. 路由守衛(wèi)（健全）

6.1 前置路由守衛(wèi)

router.beforeEach((to,from,next)=>{ })

????????to：要去哪個(gè)頁(yè)面

????????from：從哪個(gè)頁(yè)面來

????????next：讓不讓去

6.2?后置路由守衛(wèi)——已匹配到路由

router.afterEach((to, from) => { })

函數(shù)內(nèi)部可以操作瀏覽器的API，例如：上一個(gè)組件已將瀏覽器滾動(dòng)條滑到下面，切換組件后應(yīng)該將瀏覽器body標(biāo)簽滾動(dòng)條滾到最上方。

6.3 獨(dú)享守衛(wèi)

beforeEnter: (to, from, next) => { }

只守衛(wèi)一個(gè)網(wǎng)址 beforeEnter，寫在路由內(nèi)部，用法和beforeEach一樣文章來源地址http://www.zghlxwxcb.cn/news/detail-491998.html

到了這里，關(guān)于Vue框架中的路由的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！