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

    

原文：https://www.cnblogs.com/upward-lalala/p/14615325.html