Vue總結第五天：vue-router （使用模組化（建立Vue元件）機制程式設計）、router-link 標籤的屬性、路由程式碼跳轉、懶載入、路由巢狀（子路由）、路由傳遞資料、導航守衛）

一樂樂發表於2021-12-26
Vue元件程式設計路由巢狀

Vue總結第五天：vue-router

 

✿ 路由(器)目錄：

□  vue中路由作用

□  vue-router基本使用

□  vue-router巢狀路由

□  vue-router引數傳遞

□  vue-router導航守衛

□  keep-alive

 

1、vue中路由：

（1）網頁發展過程：後端路由階段（後端渲染）【主要技術：jsp】-> 前後端分離階段（前端渲染）【主要技術:ajax】-> 單頁面富應用階段（前端路由）【主要技術:vue-router】

（2）詳細：https://blog.csdn.net/weixin_45630258/article/details/122145069

 

2、基本功能使用：

（1）❀使用模組化（建立Vue元件）機制程式設計：

▷第一步：建立Vue元件（作為路由對映的元件）

▷第二步：專案安裝路由外掛依賴：npm install vue-router –save

▷第三步:因為是模組化開發，需要匯入 Vue 和 VueRouter，要呼叫Vue.use(VueRouter)， 普通開發直接通過js標籤的src引入vue-router外掛即可            

▷第四步:配置路由對映，建立和匯出路有例項

▷第五步:掛載路由例項於Vue例項中

▷第六步:使用路由標籤<router-link>和<router-view>

（一般還要搭配標籤一起使用<router-view></router-view>，路由匹配到的元件將渲染在<router-view>標籤所在的位置）

 

（2）路由的預設路徑：

（3）demo展示路由使用：

//匯入vue-router路由
import VueRouter from "vue-router";
import  Vue from 'vue';
//通過vue的use方法安裝路由器
Vue.use(VueRouter);

// import Home from "../components/Home";
// import About from "../components/About";
// import User from "../components/User";
//路由懶載入,通過箭頭函式匯入元件
const Home = () => import('../components/Home');
const About = () => import('../components/About');
const User = () => import('../components/User');
const HomeNews = () => import('../components/HomeNews');
const HomeMessage = () => import('../components/HomeMessage');
const Profile = () => import('../components/profile');

//路由對映
const routes = [
  {
    path: '',
    //使用重定向屬性，定義開啟預設為首頁
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首頁'
    },
   //使用children屬性，對映子路由關係
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
         component: HomeNews,
        meta: {
          title: '新聞'
        }
      },
      {
        path: 'message',
        component: HomeMessage,
        meta: {
          title: '訊息'
        }
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '關於'
    }
  },
  {
    path: '/user/:userId',
    component: User,
    meta: {
      title: '使用者'
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '檔案'
    }
  }
]
//建立路由物件
const router = new VueRouter({
  //routes屬性(注意屬性的拼寫是routes，不是routers):對映關係，配置路由和元件的對映關係
  routes,
  //修改路徑url,預設是hash值（會帶上#）
  mode: 'history'
})

//匯出路由物件
export default router

 

（4）修改路由url：

① URL的hash （預設方式）

② HTML5的history：

 

（5）router-link 標籤的屬性：

① to:用於指定跳轉的路徑，例如：<router-link to="/about">關於</router-link>

② tag：渲染成什麼元件，例如：<router-link to="/home" tag="button">

③ replace:不會留下history記錄, 所以指定replace的情況下, 後退鍵返回不能返回到上一個頁面中，例如：<router-link to="/about" replace>關於</router-link>

④ active-class：設定 連結啟用時使用的 CSS 類名（不過我們一般使用預設的類屬性值：.router-link-exact-active, .router-link-active）

（6）路由程式碼跳轉：除了使用router-link 標籤，也可以通過監聽事件，事件指向自定義的方法，在方法內：全域性路由物件新增路徑this.$router.push('/home');

                                             

3、動態路由（也是一種路由的引數傳遞方式）：

 

4、Vue外掛掛載到Vue例項後，相當於在Vue例項範圍內都可以使用:

✿ html拿到外掛物件: $外掛物件

✿ js拿到外掛物件: this. $外掛物件

 

5、懶載入：

（1）什麼是懶載入：

路由懶載入的主要作用就是將路由對應的元件打包成一個個的js程式碼塊.

只有在這個路由被訪問到的時候, 才載入對應的元件.

（2）es6懶載入方式（箭頭函式）：

const Home = () => import('../components/Home.vue')

 

6、路由巢狀（子路由）：

■ VueRouter的引數中使用 children 配置子路由：

//路由對映
const routes = [
  {
    path: '',
    //使用重定向屬性，定義開啟預設為首頁
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首頁'
    },
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: 'news',
         component: HomeNews,
        meta: {
          title: '新聞'
        }
      },
      {
        path: 'message',
        component: HomeMessage,
        meta: {
          title: '訊息'
        }
      }
    ]
  }
]

 

7、路由傳遞資料【params、query】：

（1）方式一：使用params（動態路由）：

▷配置路由格式: /router/:id，例如：

▷引數值會被設定到 this.$route.params，可以在對應的元件內使用。

 

 ■ 拼接動態路由變數的字串：

<!-- 拼接字串(to的屬性值)-->
<router-link :to="/user/+userId" >使用者</router-link>

data() {
  return{
    //實現動態路由的效果（拼接路徑）
    userId: 'yushan'
  }
},

 

（2）方式二：使用query：

▷配置路由格式: /router, 也就是普通配置

▷物件中使用query的key作為傳遞方式

▷引數會被設定到this.$route.query、this.$route.params

① 使用使用 router-link的to 屬性：

<router-link
  :to="{
     path: '/profile',
     query: {name: 'shanshan', age: '22', face: 'beauty'}
  }"
>測試query</router-link>

② 監聽事件，事件指向自定義的方法，在方法內：全域性路由物件this.$router新增物件（引數有path、query）：

methods: {
  profileClick(){
    this.$router.push(
      {
        path: '/profile',
        query: {
          name: 'yu',
          love: 'money'
        }
      }
    );
  }
}

 

8、導航守衛：

(1) 導航守衛作用（例如：修改網頁的標題）：

● 首先，在鉤子當中定義一些標題, 可以利用meta來定義

● 其次, 利用導航守衛,修改我們的標題.

 （2）全域性前置守衛：

① 導航鉤子的三個引數解析:

● to: 即將要進入的目標的路由物件.

● from: 當前導航即將要離開的路由物件.

● next: 呼叫該方法後, 才能進入下一個鉤子.

 （3）導航守衛補充：

■  補充一:如果是後置鉤子, 也就是afterEach, 不需要主動呼叫next()函式.

■  補充二: 上面我們使用的導航守衛, 被稱之為全域性守衛.

□  路由獨享的守衛.

□  元件內的守衛.

（4）其他：參考官網：導航守衛 | Vue Router (vuejs.org)

 

 

相關文章