基礎使用
vue-router是vue中的路由，使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當你要把 Vue Router 添加進來，我們需要做的是，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們。
vue-router的官方文檔：https://router.vuejs.org/zh/guide/
在vue文件中，即通過<router-view></router-view>或者<router-view />來渲染路由匹配到的組件。
路由文件index.js中：
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
}
App.vue文件中：
<div class="container">
<router-view />
</div>
那么在瀏覽器地址欄訪問根路徑 “http://localhost:8080/” 時，頁面就會渲染Home組件；訪問 “http://localhost:8080/about” 時，頁面就會渲染About組件，從而實現了組件的動態渲染。
小劇場
在真實項目中，router-view不僅僅只用於App.vue文件中，還會用於整體布局文件。如layout.vue文件，就是為了實現網站頭、尾、導航欄、內容區分隔，使切換路由時只變換內容區，頭、尾、導航欄等公共部分不做切換。
這時，路由文件中就會出現“children”子路由：
{
path: '/',
component: Layout,
redirect: 'dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: 'dashboard',
meta: {title: '首頁', noCache: true, affix: true}
}
]
}
Layout.vue文件中：
<el-main>
<div class="frame-main">
<router-view />
</div>
</el-main>
此處，渲染順序即為：在瀏覽器訪問項目根路徑時，App.vue先渲染Layout組件，然后再有Layout組件渲染index組件。
相當於layout組件是index.vue（首頁）的父組件，此處還可以使用父子組件傳值的方式，傳遞參數。
相當於可以把layout頁面當作一個中間頁面，來判斷一些參數，跳轉到其他頁面。
我在項目中實現不同工單頁面的跳轉時，就用到了這個特性。
在待辦跳轉邏輯中，在第一步后台只能識別這是一個工單，由於有多種工單類型，為了便於后台配置跳轉路由，所有工單統一配置這個路由（虛擬路由，沒有跳轉效果），前台得到這個路由值，進行邏輯判斷，再次調用后台服務查詢配置表，確認具體是哪種類型的工單，確認應該跳轉哪個頁面。
實現如下：
Index.vue文件中：
if(row.proUri == "/flowPath/taskOrderDispatch") {
this.$emit("dispatchTaskOrder", row);
return;
}
Layout.vue文件中：
<el-main>
<div class="frame-main">
<router-view @dispatchTaskOrder="dispatchTaskOrder" />
</div>
</el-main>
dispatchTaskOrder(value) {
// console.log(value);
let inParam = {
'TASK_ID': value.extOrderId
};
this.$post(this.mciApi.common.taskOrderService.queryTaskFlowCfg, {
...inParam
}).then(res => {
if (res.data.ROOT.BODY.RETURN_CODE === '0') {
let taskInfo = res.data.ROOT.BODY.OUT_DATA;
value.TASK_TYPE = taskInfo.TASK_TYPE;
value.ORG_SUB_TTYPE = taskInfo.ORG_SUB_TTYPE;
value.DEAL_PATH = taskInfo.DEAL_PATH;
value.RULE_CODE = taskInfo.RULE_CODE;
value.RULE_NAME = taskInfo.RULE_NAME;
value.ORG_CODE = taskInfo.ORG_CODE;
value.ROLE_CODE = taskInfo.ROLE_CODE;
this.$router.push({
path: taskInfo.DEAL_PATH,
query: value
});
} else {
this.$commonUtil.messageBox.error('', res.data.ROOT.BODY.RETURN_CODE, res.data.ROOT.BODY.RETURN_MSG);
}
})
}