什么是路由？網絡原理中，路由指的是根據上一接口的數據包中的IP地址，查詢路由表轉發到另一個接口，它決定的是一個端到端的網絡路徑。
web中，路由的概念也是類似，根據URL來將請求分配到指定的一個'端'。(即根據網址找到能處理這個URL的程序或模塊)
使用vue.js構建項目，vue.js本身就可以通過組合組件來組成應用程序；當引入vue-router后，我們需要處理的是將組件(components)映射到路由(routes)，然后在需要的地方進行使用渲染。
一、基礎路由
1、創建vue項目，執行vue init webpack projectName命令，默認安裝vue-router。項目創建后，在主組件App.vue中的HTML部分：
<template> <div id="app"> <router-view/> </div> </template>
上述代碼中，<router-view/>是路由出口，路由匹配到的組件將渲染在這里。
2、文件router/index.js中：
import Vue from 'vue' // 導入vue插件
import Router from 'vue-router' // 導入vue-router
import HelloWorld from '@/components/HelloWorld' // 導入HelloWorld組件
Vue.use(Router) // 引入vue-router
export default new Router({
routes: [
{
path: '/', // 匹配路由的根路徑
name: 'HelloWorld',
component: HelloWorld
}
]
})
以上代碼比較簡單，一般的導入、引用操作，其中Vue.use()具體什么作用？
個人理解：Vue.use(plugin, arguments)就是執行一個plugin函數，或執行plugin的install方法進行插件注冊(如果plugin是一個函數，則執行；若是一個插件，則執行plugin的install方法...)；并向plugin或其install方法傳入Vue對象作為第一個參數；如果有多個參數，use的其它參數作為plugin或install的其它參數。(具體需要分析源碼，在此不再過多解釋)
二、動態路由
什么是動態路由？動態路由是指路由器能夠自動的建立自己的路由表，并且能夠根據實際情況的變化實時地進行調整。
1、在vue項目中，使用vue-router如果進行不傳遞參數的路由模式，則稱為靜態路由；如果能夠傳遞參數，對應的路由數量是不確定的，此時的路由稱為動態路由。動態路由，是以冒號為開頭的(:)，例子如下：
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/RouterComponents/:id',
name: 'RouterComponents',
component: RouterComponents
}
]
})
2、路由跳轉，執行方式有兩大類；
第一大類：router-link模式，直接把參數寫在to屬性里面：
<router-link :to="{name:'RouterComponents',params:{id:110}}">跳轉</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項目中，界面通常由多個嵌套的組件構成；同理，URL中的動態路由也可以按照某種結構對應嵌套的各層組件：
export default new Router({
routes: [
{
path: '/', // 根路由
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/RouterComponents/:id',
component: RouterComponents,
children: [
{
path: '', // 默認路由
name: 'ComponentA', // 當匹配上RouterComponents后，默認展示在<router-view>中
component: ComponentA
},
{
path: '/ComponentB',
name: 'ComponentB',
component: ComponentB
},
]
}
]
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
