扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目实例中用query传参如何实现跳转效果
  • 890

0
分享到

vue项目实例中用query传参如何实现跳转效果

2024-04-02 19:04:59 890人浏览 泡泡鱼
摘要

目录用query传参实现跳转效果传值页面接收参数页面Vue使用query传参，解决跳转回退无参数渲染页面，无内容的方法（不需使用缓存的技术）简说params和query的区别用que

用query传参实现跳转效果

vue中已element-ui为例，写带参跳转很方便

<el-table
                :data="tables"
                style="width: 100%; cursor: pointer"
                :class="tableData.length > 0 ? '' : 'casesList'"
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
              >
                <el-button
                  slot="empty"
                  style="margin: 25% auto"
                  type="primary"
                  round
                  @click="Newcase"
                  >新建案件+</el-button
                >
                <el-table-column align="center" label="序号" width="80" type="index">
                </el-table-column>
                <el-table-column label="案件名称" align="center">
                  <template slot-scope="scope">
                    <div
                      @click="detailed(scope.row)"
                      slot="reference"
                      class="name-wrapper"
                    >
                      <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="案件说明" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.description
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="案件类型" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.caseType
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="创建人" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.createUserName
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" width="200" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.createTime
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="更新时间" width="200" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.modifiedTime
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
                    <el-button
                      size="mini"
                      @click="handleJump(scope.$index, scope.row)"
                      >分析</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

用后台接口取到数据渲染到页面，element-ui很方便配合它自己封装的handleJump(scope.$index, scope.row)，就可以很轻松的找到你想要的值和精准的操作每一行。

<script>
export default {
  components: {},
  data() {
    return {};
  },
  //计算
  computed: {},
  //监听
  watch: {},
 
  methods: {
         handleJump(index, row) {
      console.log(index, row);
      console.log(row.id);
      this.$router.push({
        path: "/CaseQuerycanvas",
        query: {data:row },
      });
    },
 
  },
  //方法
  mounted() {},
};
</script>

这里我是已传对象的形式进行传值的，到跳转页面取值会比较方便，以免到跳转页面还需要截取自己所需的值，比较麻烦。

其中的path是需要传值的目的地，就是要将值传到此页面，此路径在

 

query就是你所要传递的对象。

接下来就是去目的地页面接收所传过去的参数

这里我只需要用传过去的ID去查找和跳转对应的页面，name属性去显示在当前页面上，所以用对象传值很方便，需要哪一个取哪一个即可。

 这里就只取了传过来的ID，将id赋值给所需对象传参跳转相应页面即可。

而刚刚所说的name属性就被我用来显示，拿出来直接用就行

这样就完成了传值和动态显示，下面上完整代码，是自己所写的真实项目，写的有点垃圾大家只看query传参的部分就行。

传值页面

<template>
  <div style="padding: 20px">
    <div>
      <main class="h-full pb-16 overflow-y-auto">
        <div class="container grid px-6 mx-auto">
          <div style="position: relative">
            <a
              class="
                flex
                items-center
                justify-between
                p-4
                mb-8
                text-sm
                font-semibold
                text-purple-100
                bg-purple-600
                rounded-lg
                shadow-md
                focus:outline-none focus:shadow-outline-purple
              "
              href=""
            >
              <div class="flex items-center">
                <svg
                  class="w-5 h-5 mr-2"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  ></path>
                </svg>
 
                <span>案件列表</span>
              </div>
            </a>
            <span id="newcanvas" @click="newcanvas">新建案件&nbsp;&nbsp;></span>
          </div>
 
          <div style="display: flex; margin-bottom: 20px">
            <p class="surveyfile">
              <span>案件名称：</span
              ><el-input
                v-model="search"
                placeholder="请输入案件名称"
              ></el-input>
            </p>
            <p class="surveyfile">
              <span class="timeframe">时间范围&nbsp;&nbsp;:</span>
              <el-date-picker
                class="shijian"
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </p>
            <el-button
              type="primary"
              round
              style="margin-left: 40px; padding: 10px 20px"
              @click="Datequery"
              >搜索</el-button
            >
            <el-button round @click="Resetbutton">重置</el-button>
          </div>
          <div class="w-full overflow-hidden rounded-lg shadow-xs">
            <div class="w-full overflow-x-auto">
              <el-table
                :data="tables"
                style="width: 100%; cursor: pointer"
                :class="tableData.length > 0 ? '' : 'casesList'"
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
              >
                <el-button
                  slot="empty"
                  style="margin: 25% auto"
                  type="primary"
                  round
                  @click="Newcase"
                  >新建案件+</el-button
                >
                <el-table-column align="center" label="序号" width="80" type="index">
                </el-table-column>
                <el-table-column label="案件名称" align="center">
                  <template slot-scope="scope">
                    <div
                      @click="detailed(scope.row)"
                      slot="reference"
                      class="name-wrapper"
                    >
                      <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="案件说明" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.description
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="案件类型" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.caseType
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="创建人" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.createUserName
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" width="200" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.createTime
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="更新时间" width="200" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.modifiedTime
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
                    <el-button
                      size="mini"
                      @click="handleJump(scope.$index, scope.row)"
                      >分析</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 新建案件 -->
            <el-dialog
              title="新增案件"
              :visible.sync="ClickaddcaseVisible"
              width="50%"
            >
              <el-fORM
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="案件名称" prop="name">
                  <el-input
                    v-model="ruleForm.name"
                    maxlength="20"
                    show-Word-limit
                    placeholder="请输入案件名称(必填)"
                  ></el-input>
                </el-form-item>
                <el-form-item label="案件类型" prop="Typeofcase">
                  <el-select
                    v-model="ruleForm.Typeofcase"
                    placeholder="请选择案件类型(必填)"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.code"
                      :label="item.label"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="警种" prop="policecateGory">
                  <el-input
                    placeholder="请输入警种"
                    v-model="ruleForm.policecategory"
                  ></el-input>
                </el-form-item>
                <el-form-item label="案件说明" prop="Casedescription">
                  <el-input
                    type="textarea"
                    v-model="ruleForm.Casedescription"
                    maxlength="200"
                    show-word-limit
                    placeholder="请输入案件说明(必填)"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="ClickaddcaseVisible = false"
                    >取消</el-button
                  >
                  <el-button type="primary" @click="ConfirmaddinGCases"
                    >确定</el-button
                  >
                </el-form-item>
              </el-form>
            </el-dialog>
            <!-- 修改案件 -->
            <el-dialog
              title="修改案件"
              :visible.sync="Modifythecase"
              width="50%"
            >
              <div class="Clickaddcase" style="width: 90%">
                <div class="Casename">
                  <p>案件名称 :</p>
                  <el-input
                    v-model="newtable.name"
                    placeholder="请输入案件名称(必填)"
                  ></el-input>
                </div>
                <div class="Typeofcase">
                  <p>案件类型 :</p>
                  <el-select
                    v-model="newtable.caseType"
                    placeholder="请选择案件类型(必填)"
                    class="Typeofcaseselect"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.code"
                      :label="item.label"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="policecategory">
                  <p>警种 :</p>
                  <el-input
                    v-model="newtable.policeType"
                    placeholder="请输入警种"
                  ></el-input>
                </div>
                <div class="Casedescription">
                  <p>案件说明 :</p>
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入案件说明(必填)"
                    v-model="newtable.description"
                  >
                  </el-input>
                </div>
              </div>
              <span slot="footer" class="dialog-footer" style="width: 50%">
                <el-button @click="Modifythecase = false">取 消</el-button>
                <el-button type="primary" @click="Modifycasedescription"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
            <div class="block" style="margin-top: 30px">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageRequestVo.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageRequestVo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>
 
 
 
  <script>
 
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        Typeofcase: "",
        policecategory: "",
        Casedescription: "",
      },
 
      search: "",
      value1: null,
      Modifythecase: false,
      ClickaddcaseVisible: false,
      options: [],
      textarea: "",
      totalElements: null,
      tableData: [],
      pageRequestVo: {
        caseId: null,
        createTimeEnd: null,
        createTimeStart: null,
        name: null,
        page: 1,
        size: 10,
      },
      newtable: {
        name: "",
        caseType: "",
        policeType: "",
        options: [],
        description: "",
      },
      total: 0,
    };
  },
  methods: {
 
    //跳转画布
    handleJump(index, row) {
      console.log(index, row);
      console.log(row.id);
      this.$router.push({
        path: "/CaseQueryCanvas",
        query: {data:row },
      });
    },
    //点击案件名称跳转
    detailed(row) {
      console.log(row);
      // console.log(id);
      this.$router.push({
        path: "/CaseQueryCanvas",
        query: { data:row },
      });
    },
 
 
  created() {},
  //方法
  mounted() {
 
  },
};
</script>
 
<style scope>
.timeframe {
  font-size: 14px;
}
.shijian {
  width: 400px !important;
}
.casesList {
  height: 500px;
}
 
.Casename,
.Typeofcase,
.policecategory,
.Casedescription {
  margin-bottom: 20px;
}
.Typeofcaseselect {
  width: 100%;
}
.dialog-footer {
  display: flex;
  justify-content: space-between;
  margin: auto;
}
.block {
  display: flex;
 
  justify-content: flex-end;
 
  margin-right: 30px;
}
 
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #7e3af2;
}
 
.mask-style {
  width: 70%;
 
  margin: 10px auto;
}
#newcanvas {
  position: absolute;
  right: 10px;
  top: 15px;
  color: #fff;
}
.surveyfile {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.surveyfile span {
  display: inline-block;
  width: 150px;
}
</style>

接收参数页面

<template>
  <div style="padding: 20px">
    <!-- <el-header>Header</el-header> -->
 
    <div>
      <main class="h-full pb-16 overflow-y-auto">
        <div class="container grid px-6 mx-auto">
          <div style="position: relative">
            <a
              class="
                flex
                items-center
                justify-between
                p-4
                mb-8
                text-sm
                font-semibold
                text-purple-100
                bg-purple-600
                rounded-lg
                shadow-md
                focus:outline-none focus:shadow-outline-purple
              "
              href=""
            >
              <div class="flex items-center">
                <svg
                  class="w-5 h-5 mr-2"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                  ></path>
                </svg>
 
                <span>{{this.$route.query.data.name}}案件画布列表</span>
              </div>
            </a>
            <span id="newcanvas" @click="newcanvasBtn"
              >新建画布 &RightArrow;</span
            >
          </div>
 
          <div style="display: flex; margin-bottom: 20px">
            <p class="surveyfile">
              <span>画布名称：</span
              ><el-input
                placeholder="请输入内容"
                v-model="pageRequestVo.name"
              ></el-input>
            </p>
            <p class="surveyfile">
              <span style="width: 100px">创建时间：</span>
              <el-date-picker
                v-model="datetime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </p>
            <el-button
              type="primary"
              round
              style="margin-left: 40px"
              @click="searchbtn"
              >搜索</el-button
            >
          </div>
          <div class="w-full overflow-hidden rounded-lg shadow-xs">
            <div class="w-full overflow-x-auto">
              <el-table
                :data="tableData"
                style="width: 100%; cursor: pointer"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
              >
                <el-table-column label="序号" width="80" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.number
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="画布名称" align="center">
                  <template slot-scope="scope">
                    <div
                      @click="detailed(scope.row.id)"
                      slot="reference"
                      class="name-wrapper"
                    >
                      <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="画布描述" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.description
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="创建日期" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.createTime
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="更新时间" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.modifiedTime
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >修改</el-button
                    >
 
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
 
                    <el-button
                      size="mini"
                      @click="historyBtn(scope.$index, scope.row)"
                      >历史记录</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
 
            <div class="block" style="margin-top: 30px">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageRequestVo.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageRequestVo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalElements"
              >
              </el-pagination>
            </div>
 
            <el-dialog
              title="修改信息"
              :visible.sync="dialogVisible"
              width="40%"
              center
            >
              <div class="mask-style">
                <p>
                  画布名称：<el-input
                    v-model="editList.name"
                    placeholder="请输入画布名称"
                    style="width: 80%; margin-bottom: 30px"
                  ></el-input>
                </p>
 
                <p>
                  画布描述：<el-input
                    v-model="editList.description"
                    placeholder="请输入画布描述"
                    style="width: 80%"
                  ></el-input>
                </p>
              </div>
 
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editBtn()">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </main>
    </div>
    <el-dialog title="新建画布" :visible.sync="dialogVisible1" width="30%">
      <el-input
        v-model="cnavasname"
        placeholder="请输入画布名称"
        style="margin-top: 30px"
      ></el-input>
      <el-input
        v-model="describe"
        placeholder="请输入画布描述"
        style="margin-top: 30px"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitBtn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-footer>Footer</el-footer> -->
  </div>
</template>
 
<script>
import {
  deleteCanvas,
  editCanvas,
  getAddCanvas,
  getCanvasId,
} from "@/apis/operate.js";
import dayjs from "dayjs";
import { CurrentCaseList } from "../../apis/Casemanagement";
export default {
  components: {},
  data() {
    return {
      datetime: null,
      cnavasname: "",
      describe: "",
      dialogVisible1: false,
      totalElements: null,
      tableData: [],
      editList: {
        name: "",
        description: "",
        id: "",
      },
      pageRequestVo: {
        createTimeEnd: null,
        createTimeStart: null,
        name: null,
        page: 1,
        size: 10,
      },
      dialogVisible: false,
    };
  },
  //计算
  computed: {},
  //监听
  watch: {},
 
  methods: {
 
    //案件接收参数
    Casereceivingparameters() {
      //query对象传值
      console.log(this.$route.query.data);
      this.pageRequestVo.caseId=parseInt(this.$route.query.data.id)
      CurrentCaseList(this.pageRequestVo).then((res) => {
        console.log(res);
        this.totalElements = res.data.totalElements;
        //更改时间
        res.data.content.forEach((item) => {
          item.modifiedTime = dayjs
            .unix(item.modifiedTime)
            .format("YYYY-MM-DD HH:mm");
        });
 
        //创建日期
        res.data.content.forEach((item) => {
          item.createTime = dayjs
            .unix(item.createTime)
            .format("YYYY-MM-DD HH:mm");
        });
        let number = 1;
 
        res.data.content.map((item) => {
          return (item.number = number++);
        });
 
        this.tableData = [...res.data.content];
      });
    },
 
  },
 
  created() {
    this.Casereceivingparameters();
  },
  //方法
  mounted() {},
};
</script>
 
<style>
.block {
  display: flex;
 
  justify-content: flex-end;
 
  margin-right: 30px;
}
 
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #7e3af2;
}
 
.mask-style {
  width: 70%;
 
  margin: 10px auto;
}
#newcanvas {
  position: absolute;
  right: 10px;
  top: 15px;
  color: #fff;
}
.surveyfile {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.surveyfile span {
  display: inline-block;
  width: 150px;
}
</style>

vue使用query传参，解决跳转回退无参数渲染页面，无内容的方法（不需使用缓存的技术）

      this.$router.push({
        name: "goodsDetail",
        query: {
          id: id,
          goods_type:goods_type
        }
      });
 mounted(){
      this.proId = this.$route.query.id;//商品id
      this.goods_type = this.$route.query.goods_type;//商品类型
}

简说params和query的区别

params对象会在回退后消失，但是query会绑在路由后，有路可退

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

--结束END--

本文标题: vue项目实例中用query传参如何实现跳转效果

本文链接: https://lsjlt.com/news/168986.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue项目实例中用query传参如何实现跳转效果
    目录用query传参实现跳转效果传值页面接收参数页面vue使用query传参，解决跳转回退无参数渲染页面，无内容的方法（不需使用缓存的技术）简说params和query的区别用que...
    99+
    2024-04-02
  • Vue项目中如何实现带参跳转功能
    这篇文章主要介绍Vue项目中如何实现带参跳转功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！页面介绍：主页面：name —> shishengzuotanhuichaxun此页面表格中的数据均通过接口从后端获...
    99+
    2023-06-14
  • Vue项目中实现带参跳转功能
    页面介绍： ​ 主页面：name —> shishengzuotanhuichaxun ​ 此页面表格中的数据均通过接口从后端获取数组对象并渲染，每一...
    99+
    2024-04-02
  • Vue项目中实现描点跳转scrollIntoView的案例
    目录Vue实现描点跳转scrollIntoView方式一：使用a标签#id形式方式二：scrollIntoView使用vue遇到scrollIntoView无效问题官方文档写的简单V...
    99+
    2024-04-02
  • vue子路由跳转实现tab选项卡效果
    tab选项卡的布局在项目中是很常见的，在后台管理系统中左边是导航栏固定，右边是对应的页面，每次点击左边的标题，只有右面的对应页面在切换，而vue要做tab选项卡，推荐使用实现a标签的...
    99+
    2024-04-02
  • vue如何实现本项目页面之间跳转
    目录本项目页面之间跳转方式在template模板中添加在methods中写入路径修改路由文件vue解决页面跳转问题解决办法本项目页面之间跳转方式 在template模板中添加 but...
    99+
    2024-04-02
  • vue3中如何使用router路由实现跳转传参
    这篇文章主要介绍了vue3中如何使用router路由实现跳转传参的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3中如何使用router路由实现跳转传参文章都会有所收获，下面我们一起来看看吧。一、路由跳转首...
    99+
    2023-07-05
  • 如何在vue3+ts项目中使用query和params传参
    目录一 query 传参 （类似get请求）query 传参方式①query 传参方式② query 传参方式③二 params 传参 （类似post请求）params 传...
    99+
    2023-05-16
    vue query和params传参区别 vue的query传参 vue的params传参
  • vue跳转页面并且实现参数传递接受示例
    目录vue跳转页面及参数的传递接受一、页面跳转、传递参数二、接收参数vue跳转页面及参数的传递接受 要实现一个功能：从页面A跳转到页面B，并且页面A的参数要传递到页面B，B使用传过来...
    99+
    2024-04-02
  • php如何实现自动跳转传递参数
    今天小编给大家分享一下php如何实现自动跳转传递参数的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一、get 方式传递参数g...
    99+
    2023-07-05
  • 在spring boot项目中如何实现使用thymeleaf实现页面跳转
    本篇文章为大家展示了在spring boot项目中如何实现使用thymeleaf实现页面跳转，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。前言在学习springboot 之后想结合着html做个小d...
    99+
    2023-05-31
    springboot thymeleaf 页面跳转
  • vue子路由跳转实现tab选项卡效果的方法
    这篇文章主要介绍“vue子路由跳转实现tab选项卡效果的方法”，在日常操作中，相信很多人在vue子路由跳转实现tab选项卡效果的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue子路由跳转实现tab选项...
    99+
    2023-06-29
  • Angular中如何实现$state.go页面跳转并传递参数
    这篇文章给大家分享的是有关Angular中如何实现$state.go页面跳转并传递参数的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。路由页面（注意这里要在路由上添加一个参数用于传...
    99+
    2024-04-02
  • vue中如何实现路由跳转
    这篇文章主要介绍vue中如何实现路由跳转，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！跳转方式：1、用“<router-link :to="{..}">”语句；2、用“this.$ro...
    99+
    2023-06-25
  • PHP代码示例：如何用POST方式传参并实现页面跳转
    标题：PHP代码示例：使用POST方式传参并实现页面跳转的方法 在Web开发中，经常会涉及到如何通过POST方式传递参数，并在服务器端进行处理后实现页面跳转的需求。PHP作为一种流行的...
    99+
    2024-03-07
    php post 页面跳转
  • Vue中如何实现路由传参
    本篇文章给大家分享的是有关Vue中如何实现路由传参，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。情景模拟：A页面中，有一些div是根据A中的b...
    99+
    2024-04-02
  • Vue如何实现牌面翻转效果
    这篇文章主要讲解了“Vue如何实现牌面翻转效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue如何实现牌面翻转效果”吧！1.实现效果实现一个点击沿中心Y...
    99+
    2024-04-02
  • vue3中怎么使用router路由实现跳转传参
    本文小编为大家详细介绍“vue3中怎么使用router路由实现跳转传参”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue3中怎么使用router路由实现跳转传参”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一...
    99+
    2023-07-06
  • vue项目中实现el-dialog组件可拖拽效果
    目录0. 首先上图，看效果1. 实现方法参考资料0. 首先上图，看效果 1. 实现方法 第一步：创建 drag.js文件 实现拖拽源码 export function start...
    99+
    2024-04-02
  • vue中如何使用this.$router.push()实现跳转页面
    这篇文章主要介绍了vue中如何使用this.$router.push()实现跳转页面，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。this....
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作