vue路由带参

最新推荐文章于 2024-04-29 20:03:13 发布
最新推荐文章于 2024-04-29 20:03:13 发布
阅读量630 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36565051/article/details/81478634
版权

HTML：

<el-table-column label="操作" width="250" fixed="right">
                    <template slot-scope="scope">
                                <router-link
                                        :to="{path:'url', query: {paramName: paramValue}}"
                                >
                                    查看
                                </router-link>                    
                </el-table-column>

在HTML中声名 <router-link> 标签，并使用:to来指定参数和url

routes

/**
 * Created by lixinjian1 on 2018/06/28.
 */
$(function() {
    let routes = [
        {
            path: 'url',
            component: 组件名
        }
    ];

    let router = new VueRouter({
        mode: 'history',
        routes: routes
    });

    window.vue = new Vue({
        el: '#app',
        router: router
    });
});

JS

$(function () {
    var 组件名= {
        template: '#detail;',
        data: function () {
            return {
                // 路由参数
                urlQuery: this.$route.query,
                paramValue:''
            }
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            '$route': 'initData'
        },
        created() {

        },
        methods: {
            loadData() {
              this.paramValue = urlQuery.paramName;
            }
        }
    };

    window.组件名 = 组件名;
});

主页面： 根据此页面决定路由的url跳转到哪个HTML上

<body>
<div layout:fragment="content">

    // 根据此处决定使用哪一个路由
    // URL路由 决定使用哪个JS JS中决定渲染哪个模板
    <div id="app">  
        <router-view></router-view>
    </div>

    // 渲染该模板 th：insert 决定Html片段
    <template id="detail">
        <div th:insert="~{invoice/qualification/QualificationList}"></div>
    </template>

    <script src="/static/js/invoice/qualification/qualification-component.js"></script>
    <script src="/static/js/invoice/qualification/detail.js"></script>

</div>
</body>

</html>
哲思新见
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3种vue路由传参的基本模式
12-28
在vue路由中，支持3中传参方式。场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取对应li的数据，显示相应的正确的内容。父组件中：(article.id)>方案一：getDescribe(id) {// 直接调用$router....
vue中路由携带参数
weixin_46371752的博客
02-24 2264
1、query 一、query参数 <router-link to='/home/message?id=555&message="hhhh"'> 重要：如何在路由中携带js的变量。 <!--路由跳转携带query参数，to的字符串写法--> <router-link :to='`/home/message?id=${m.id}&mes=${m.name}`'> 1、给to加v-bind,简写是冒号 : 2、给路由加模板字符串...
【vue】vue路由传参的三种方式
热门推荐
hello world_
10-22 8万+
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。 方式一：params 传参（显示参数） params 传参（显示参数）又可分为 声明式 和 编程式 两种方式 1、声明式 router-link 该...
vue路由传参的8种方式！！！
最新发布
m0_74830901的博客
04-29 1850
我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同。
vue 路由跳转携带参数
小白成长记
06-29 2万+
vue 路由跳转携带参数的方式：一、 方式跳转，1. 携带query参数，2. 携带params参数，3.将参数转换为props属性；二、编程方式跳转路由
vue路由传参（六种方式）
VXYupq的博客
04-04 5097
布尔模式传参，在路由配置文件中的路径配置中，如果你使用了动态路由，那么他不仅仅可以往params里面传递参数对象过去，他也会往props里面传递过去，注意参数接取需要在你所要跳转的路径的组件中接取，如果使用动态路由传递参数想要使用props，需要设置props为true。props:[,'name','age','sex'],在组件模板中接收。name:'老王',props:[,'name','age','sex'],在组件模板中接收。props:['id','name'],在组件模板中接收。
Vue路由使用参数传递数据
XunLin233的博客
11-08 723
router-link to="/路径?参数名1=参数值1&参数名2=参数值2">内容
vue+requirejs页面带参跳转
06-07
本文将详细介绍如何在Vue项目中使用RequireJS实现页面带参跳转。 首先，我们需要理解Vue.js中的路由系统。Vue Router是Vue官方推荐的路由库，它允许我们定义和管理应用的路由。通过定义路由，我们可以设置不同的URL...
详解vue 路由跳转四种方式 (带参数)
12-29
1. router-link ...// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: /home/:id 或者 path: /home:id
Nuxt框架的路由跳转及传参
01-20
Nuxt.js 是一个基于 Vue.js 的 SSR（服务器端渲染）框架，它简化了构建 Vue 应用的过程，特别是在处理路由方面。在 Nuxt 框架中，路由管理是自动化的，但理解如何进行路由跳转和传递参数是至关重要的。下面我们将...
vue中路由vue-router的使用和生命周期
01-06
Vue Router 是vue.js官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。 vue-router的使用 1.在项目src文件夹下新建名为router的文件夹 2.在router文件夹下新建index.js 编程式 router...
一文详解Vue中实现路由跳转传参的4种方式（十分详尽）
青春木鱼的博客
08-01 2万+
在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击 a标签链接。vue项目中点击router-link标签链接都属于声明式导航。在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：普通网页中调用location.href跳转到新页面的方式，属于编程式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()。
Vue项目运行路由总会带#，一行代码搞定！
盖世小可爱的博客
09-03 1697
一、问题 使用VUE路由，项目的url总是带有#，如下： http://localhost:8066/#/ 二、解决 修改路由文件中 index.js 文件，即 src --> router --> index.js没修改前： export default new Router({ routes: [ { path: '/', name: 'LoginView', component: LoginView } ] }) ...
Vue笔记 路由的query参数、命名路由、路由的params参数、路由的props配置
qiaoyangla的博客
04-08 1024
一、路由的query参数 1、传递参数 <!-- 跳转路由并携带query参数，to的字符串写法 --> <router-link :to="`/home/messages/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; <!-- 跳转路由并携带query参数，to的对象写法 --> <router-link ...
vue路由传参的6种方式
一步一个脚印，踏实努力，向着目标前进
08-09 5178
命名路由适用于需要在不同组件之间传递参数的情况，Props传递参数适用于需要在组件之间传递参数的情况，而Vuex状态管理适用于需要在整个应用程序中共享参数的情况。需要考虑参数的类型、数量、动态性、共享性等因素，以及对URL长度和可读性的要求。根据具体的应用场景和需求，可以选择适合的方式来传递参数。在路由定义中给每个路由设置一个唯一的名称，然后通过名称来传递参数。在路由定义中使用props属性来传递参数。在路由定义中使用动态路径参数来传递参数。在路由定义中使用元信息来传递参数。
前端框架里url中#的真正作用
BHSZZY的博客
12-05 2697
最近看本人公司的前端项目，发现url中经常会包含 # 号，如下： 其中，是一个controller的mapping，也是一个controller的mapping，是个参数，的controller会接收这个参数，根据值不同进行不同的处理、展示不同的菜单。但是，其中的，一直搞不懂是什么意思。主要有2个问题： 1.如果点击页面按钮，后的内容就会变化，展示不同的页面 例如： 2.但是，如果直接修改浏览器中的url中#后面的内容，页面却不会变，没有任何作用 汇总一下，问题就是： 后的内容有什么用？到底是怎么实现页面跳
Vue-Router路由携带参数跳转3种方式大全，刷新页面参数不丢失，不显示到地址url中
coderYYY的博客
11-11 6269
此博客将详细介绍Vue-router传参的方法大全
Vue路由传参(query)
weixin_45830334的博客
03-30 1万+
从遍历出的列表里跳转对应的详情 template中 <div v-for="(item,index) in list" :key="index"> <p>{{ item.pigId }}</p> <p>{{ item.pigName }}</p> </div> script中 data() { return { list: [] } }, 通过接口获取列表先: //
路由的四种跳转方式以及参数传递
qq_38123697的博客
11-05 1162
router-link 不带参数 //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: “/home/:id” 或者 path: “/home:id” // 不配置path ,第一次可请求,刷新页面i...
vue 路由配置带参
09-26
在Vue中，路由配置带参可以通过在路由路径中使用冒号（:）来表示参数。例如，如果你想要在路由路径中传递一个名为id的参数，你可以这样配置路由： ```javascript { path: '/home/:id', component: require('../...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值