vue中的router-view
基础使用
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);
}
})
}
