Vue页面路由的两种实现方式

分手后的思念是犯贱 2022-09-02 11:36 147阅读 0赞

近期的工作中硬着头皮写了一堆前端的东西，后台系统的页面马马虎虎也就那么回事。

常见的页面路由场景要么是在列表点击关键字跳转详情页，要么就是选中一条记录，通过按钮跳转到新页面展示详情信息。

## **this.$router.push()** ##

**编程式路由实现。使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL。**

push方法除了path变量指定地址外，还可以使用 query 传递参数。

<el-button type="primary" size="mini" @click="handleConfig">配置</el-button>
    
    handleConfig() {
          let currentRow = this.curRow;
          this.$router.push({path: "/project/detail", query: currentRow});
        },

跳转页面后可以通过 this.$route.query 拿到路由跳转时的传参，进行下一步处理。

if (this.$route.query.id !== undefined) {
        getDetail(this.$route.query.id).then(response => {
          this.form = response.data;
         });
    }

##  <router-link> 标签 ##

**这种属于声明式路由实现，当点击 <router-link> 时，这个方法会在内部调用，即点击 <router-link :to="..."> 等同于调用 router.push(...)方法。**

<el-table-column label="项目编号" align="left" prop="projectCode">
        <template slot-scope="scope">
          <router-link :to="{path:'/project/detail', query:{id: scope.row.id}}" style="color: #20b6f9">{
       {scope.row.projectCode}}</router-link>
        </template>
    </el-table-column>

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue Router - 路由的使用、两种切换方式、两种传参方式、嵌套方式

目录一、Vue Router 1.1、下载 1.2、基本使用 a）引入 vue-router.js（注意：要在 Vue.js 之后引入）. b）创建好路由规则

小鱼儿/ 2024年02月21日 09:35/ 0 赞/ 14 阅读

相关 Vue路由传递query参数的两种方式

路由是可以传递参数的，一般使用query进行传参，有两种方式，接下来一一展示案例展示先编写一个简单的案例我这里用的一个三级路由 ![在这里插入图片描述][86

蔚落/ 2023年09月23日 23:49/ 0 赞/ 21 阅读

相关 Vue 路由的两种传参方式

路由的第一种传参方式query 采用将参数写在路由的地址后面进行传参：？名字=value 第一种传参方式在 this.$route.query 中，如图所示： ![在

比眉伴天荒/ 2022年12月21日 03:28/ 0 赞/ 185 阅读

相关浅析Vue两种路由模式

背景知识大多数vue项目采用SPA(单页面应用)的模式开发，不同视图的切换，都要通过前端路由去管理和控制。因此平时我们开发vue的项目，都会install vue

迷南。/ 2022年11月28日 00:53/ 0 赞/ 129 阅读

相关 vue-router路由传递参数的两种方式

vue-router传递参数分为两大类编程式的导航 router.push 声明式的导航 <router-link> 编程式的导航 router.push

向右看齐/ 2022年10月30日 10:20/ 0 赞/ 153 阅读

相关 Vue页面路由的两种实现方式

近期的工作中硬着头皮写了一堆前端的东西，后台系统的页面马马虎虎也就那么回事。常见的页面路由场景要么是在列表点击关键字跳转详情页，要么就是选中一条记录，通过按钮跳转到

分手后的思念是犯贱/ 2022年09月02日 11:36/ 0 赞/ 148 阅读

相关 vue.js通过路由跳转页面的三种方式

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中： <li v-for="article in articles" @

古城微笑少年丶/ 2022年05月14日 09:43/ 0 赞/ 244 阅读

相关 Flask两种配置路由的方式

from flask import Flask app = Flask(__name__) @app.route('/he

素颜马尾好姑娘i/ 2022年02月28日 05:40/ 0 赞/ 198 阅读

相关 vue传递路由的三种方式

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中： <li v-for="article in articles" @

爱被打了一巴掌/ 2021年09月02日 08:35/ 0 赞/ 382 阅读

相关实现vue路由跳转的三种方式

实现vue路由跳转的三种方式 1、router-link <router-link to='需要跳转到的页面的路径'>

红太狼/ 2020年06月03日 13:33/ 0 赞/ 1794 阅读