vue中的router-view

目录基础使用小剧场基础使用vue-router是vue中的路由，使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉...

• 基础使用
• 小剧场

基础使用

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);
????????}
??????})
????}