什么是路由？網(wǎng)絡(luò)原理中，路由指的是根據(jù)上一接口的數(shù)據(jù)包中的IP地址，查詢路由表轉(zhuǎn)發(fā)到另一個(gè)接口，它決定的是一個(gè)端到端的網(wǎng)絡(luò)路徑。

web中，路由的概念也是類似，根據(jù)URL來(lái)將請(qǐng)求分配到指定的一個(gè)'端'。(即根據(jù)網(wǎng)址找到能處理這個(gè)URL的程序或模塊)
使用vue.js構(gòu)建項(xiàng)目，vue.js本身就可以通過(guò)組合組件來(lái)組成應(yīng)用程序；當(dāng)引入vue-router后，我們需要處理的是將組件(components)映射到路由(routes)，然后在需要的地方進(jìn)行使用渲染。

一、基礎(chǔ)路由

1、創(chuàng)建vue項(xiàng)目，執(zhí)行vue init webpack projectName命令，默認(rèn)安裝vue-router。項(xiàng)目創(chuàng)建后，在主組件App.vue中的HTML部分：

<template>
 <div id="app">
  <router-view/>
 </div>
</template>

上述代碼中，<router-view/>是路由出口，路由匹配到的組件將渲染在這里。

2、文件router/index.js中：

import Vue from 'vue' // 導(dǎo)入vue插件
import Router from 'vue-router' // 導(dǎo)入vue-router
import HelloWorld from '@/components/HelloWorld' // 導(dǎo)入HelloWorld組件

Vue.use(Router) // 引入vue-router
export default new Router({
 routes: [
  {
   path: '/', // 匹配路由的根路徑
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

以上代碼比較簡(jiǎn)單，一般的導(dǎo)入、引用操作，其中Vue.use()具體什么作用？

個(gè)人理解：Vue.use(plugin, arguments)就是執(zhí)行一個(gè)plugin函數(shù)，或執(zhí)行plugin的install方法進(jìn)行插件注冊(cè)(如果plugin是一個(gè)函數(shù)，則執(zhí)行；若是一個(gè)插件，則執(zhí)行plugin的install方法...)；并向plugin或其install方法傳入Vue對(duì)象作為第一個(gè)參數(shù)；如果有多個(gè)參數(shù)，use的其它參數(shù)作為plugin或install的其它參數(shù)。(具體需要分析源碼，在此不再過(guò)多解釋)

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

什么是動(dòng)態(tài)路由？動(dòng)態(tài)路由是指路由器能夠自動(dòng)的建立自己的路由表，并且能夠根據(jù)實(shí)際情況的變化實(shí)時(shí)地進(jìn)行調(diào)整。

1、在vue項(xiàng)目中，使用vue-router如果進(jìn)行不傳遞參數(shù)的路由模式，則稱為靜態(tài)路由；如果能夠傳遞參數(shù)，對(duì)應(yīng)的路由數(shù)量是不確定的，此時(shí)的路由稱為動(dòng)態(tài)路由。動(dòng)態(tài)路由，是以冒號(hào)為開(kāi)頭的(:)，例子如下：

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }, {
   path: '/RouterComponents/:id',
   name: 'RouterComponents',
   component: RouterComponents
  }
 ]
})

2、路由跳轉(zhuǎn)，執(zhí)行方式有兩大類；

第一大類：router-link模式，直接把參數(shù)寫在to屬性里面：

<router-link :to="{name:'RouterComponents',params:{id:110}}">跳轉(zhuǎn)</router-link>

第二大類：$router.push()模式，代碼如下：

methods: {
  changeFuc (val) {
   this.$router.push({
    name: 'RouterComponents',
    params: {id: val}
   })
  }
}

或者：

methods: {
  changeFuc (val) {
   this.$router.push({
    path: `/RouterComponents/${val}`,
   })
  }
}

三、嵌套路由

vue項(xiàng)目中，界面通常由多個(gè)嵌套的組件構(gòu)成；同理，URL中的動(dòng)態(tài)路由也可以按照某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件：

export default new Router({
 routes: [
  {
   path: '/', // 根路由
   name: 'HelloWorld',
   component: HelloWorld
  }, {
   path: '/RouterComponents/:id',
   component: RouterComponents,
   children: [
    {
     path: '', // 默認(rèn)路由
     name: 'ComponentA', // 當(dāng)匹配上RouterComponents后，默認(rèn)展示在<router-view>中
     component: ComponentA
    },
    {
     path: '/ComponentB',
     name: 'ComponentB',
     component: ComponentB
    },
   ]
  }
 ]
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論