vue3路由的使用，保證你有所收穫！

南風晚來晚相識發表於2022-01-17
Vue路由

路由變數

有的小夥伴，可能是第一次聽見路由變數這個詞。
什麼是路由變數了，顧名思義就是這個路由地址是動態的，不是固定的。
它的運用場景是哪裡呢？
比如說:1.詳情頁的地址，我們就可以去使用路由變數。
比如說部落格園的文章詳情：https://www.cnblogs.com/IwishIcould/p/15658121.html
15658121 就是就是一個變數的值
下面我們簡單的在vue路由中去配置路由變數

vue3 路由變數的使用

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/new/:id',
    name: 'new',
    component: () => import('../views/new.vue')
  },
]

疑惑的地方

大家看見  path: '/new/:id', 可能會覺得疑惑。
這個是個什麼玩意！還可以這樣去寫？
好了不給大家兜圈子其實 :id==>是一個變數，就是我們上面說的路由變數。
/new/:id ==>對應的路由地址是 /new/xxx。
[你可以理解為是部落格園的，https://www.cnblogs.com/IwishIcould/p/15658121.html。xxx=15658121]
當你在頁面上輸入 http://localhost:8080/new的時候，
並不會去展示"/new"路由對應的new頁面。
需要輸入 http://localhost:8080/new/xxx 才能夠展示對應的new頁面。
這個xxx可以是任意值，想必你清楚路由變數了。
【友情提示】
注意在位址列輸入:http://localhost:8080/new/xxx/aaa 是不會展示對應的new頁面。

如何獲取路由變數的引數？

<template>
  <div class="home">
    新聞頁id==> {{  $route.params }}
  </div>    
</template>
<script lang="ts">
import { defineComponent ,onBeforeMount,reactive,toRaw} from 'vue';
import { useRoute} from 'vue-router'
export default defineComponent({
    setup(){
      let route=useRoute()
      console.log('route獲取引數',route.params.id);
      return { route }
    }
});
</script>
需要注意的是，不能夠通過 route.query.id這個樣子的方式來獲取引數。
而是要通過 route.params.id.來獲取路由變數。

如何處理專案中不存在的路由

在我們的專案的時候，使用者可能在位址列輸入存在的地址。
比如我在部落格園上輸入一個不存在的地址，我們看看他們是怎麼處理的？
我們發現部落格園上有一個頁面展示【您訪問的資源不存在】
在我們使用vue做管理系統,怎麼處理這個問題呢?
我們使用   path: '/:catchAll(.*)',
【友情提示】catchAll是我自己定義的，當然你也可以定義其他值。
比如說：path: '/:nopage(.*)',

處理404頁面的辦法

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/new/:id', 
    name: 'new',
    component: () => import( '../views/new.vue')
  },
  {
    path: '/:catchAll(.*)',
    name:'notfined',
    component: () => import( '../views/notfined.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
需要注意的點
{
    path: '/:catchAll(.*)',
    name:'notfined',
    component: () => import( '../views/notfined.vue')
}
為什麼要放置在最後面了?
因為如果你放置在前面的話，就會匹配到這個路由。
本來人家是有對應的展示頁面，你可倒好.
給人家匹配了一個404頁面。
這個是vue3處理404。

vue2的話直接使用
{
  path: '*',
  name: 'notfined',
  component: () => import('../views/notfined.vue')
}
我們需要注意一下vue2和vue3的區別
下面這張圖是我們處理404的頁面

vue如何路由需要正則表達怎麼處理

我們剛剛說了，有些時候我們需要使用路由變數。
但是我們很多時候要求這個變數是要滿足我們的規則。
如果這個變數的值必須是數字，必須包含某個字元。這樣的情況怎麼處理了？
我們可以在路由中使用正則表達的。
我們看一下，下面的3個例子

路由正則如何處理

{
    path: '/new/:id(\\d+)', 
    name: 'new',
    component: () => import( '../views/new.vue')
},
id(\\d+)==》第一個\表示轉移。第二個\d表示數字開頭
http://localhost:8080/new/123 才可以訪問
http://localhost:8080/new/aaa 訪問失敗，因為aa不是數字

路由多個引數

{
  path: '/new/:id+', 
  name: 'new',
  component: () => import( '../views/new.vue')
},

'/new/:id+', 表示可以有一個或者多個引數
訪問：http://localhost:8080/new/123a/123123

引數可以有也可以沒有,也可以時任意多個

{
  path: '/new/:id*',
  name: 'new',
  component: () => import( '../views/new.vue')
},

巢狀頁面

 {
    path: '/user/:type', 
    //type的值可以時是hengban，這裡其實是 /user/hengban 或者/user/shuban
    name: 'user',
    component: () => import('../views/user.vue'),
    children: [
      {
        path: 'hengban', //不需要斜槓
        name: 'hengban',
        component: () => import('../views/hengban.vue')
      },
      {
        path: 'shuban', //不需要斜槓
        name: 'shuban',
        component: () => import('../views/shuban.vue')
      },
    ]
  },

訪問 http://localhost:8080/user/hengban/shuban 出現橫板
http://localhost:8080/user/shuban/shuban 出現豎版

#### user.vue 頁面
這裡說明了 一個路由中可以有多個路由容器。
多個容器可以在更新資料的時候區域性重新整理
<template>
  <div>
      我是路由容器
      <router-view></router-view>
  </div>
</template>

需求描述

有些時候，我們可能會遇見這樣的場景。
不同的路由地址，但是對應的是同一個頁面。
這個時候我們有兩種辦法來解決，第一種就是在位址列通過引數來區分。
還有一種使用路由別名。其實就是說:這個路由還有另外一個名稱。
可以理解我們人的[小名]。??

上面這個巢狀的方法，在專案中使用的很少。
我們一般不這樣去使用

路由別名 alias的簡單使用

{
  path: '/about',
  alias:'/aboutbieming', //使用別名
  name: 'About',
  component: () => import('../views/About.vue')
},
當我們在位址列欄輸入
http://localhost:8080/about和http://localhost:8080/aboutbieming 都展示About頁面

可憐兮兮的我

如果你覺得我寫的不錯的話，可以給我點一個贊或者推薦
當然看官們可以給我打賞，已經三個月沒有吃辣條了嗚嗚?

相關文章