<template>
    <div class="page-cell">
        <co-header title="页面跳转例子">
          <fallback slot="left"></fallback>
        </co-header>
        <co-cell title="A跳B页面" label="返回: D --> C --> B --> A" value="C页面返B页面" to="page-b" class="page-content-main"></co-cell>
        <co-cell title="A跳C页面" label="返回: D --> C --> A" value="C页面返回首页" to="page-c" class="page-content-main"></co-cell>
        <p class="co-pd-a04">传参示例</p>
        <co-cell title="A跳P页面并传参" label="返回: P --> A" value="参数：'这是参数1'" to="page-param/这是参数1" class="page-content-main"></co-cell>
        <co-cell title="A跳P页面并传参" label="返回: P --> A" value="参数：'这是参数2'" to="page-param/这是参数2" class="page-content-main"></co-cell>
        <co-cell title="跳转到base模块并传递参数" :value="$route.params.text" @click.native="goBase" class="page-content-main"></co-cell>
        <div class="bigSize">A</div>
    </div>
</template>

<script>
  const NAMESPACE = 'index';

  export default{
    name: NAMESPACE,
    methods: {
      goBase() {
        let param = '111';
        let paramName = 'p';
        let queryStr = paramName + '=' + param;
        window.location.href = '/example-base/index.html#/?' + queryStr;
        // 在目标页面使用this.$route.query.p获取参数
      }
    }
  };
</script>

<style lang="less" rel="stylesheet/less">
  .bigSize{
    font-size: 100px;
    text-align: center;
  }
  .co-pd-a04{
    padding: .4rem;
  }
</style>
