原文链接:
vue中的三种传递参数方法_vue button 传参-CSDN博客
<div class="shopLine" @click="goDetails(item.id)" v-for="item,index in cart"> <button @click="goThird">点击跳转第二种方式传参</button> <button @click="goSi">点击跳转第三种方式传参</button>
在methods方法下
methods:{ //也是path的方式来去传递动态路由参数 //#/second/00001 goDetails(isd){ this.$router.push({ path:'/second/'+isd }) }, goThird(){ //第二种方式传参 不需要匹配路由中做配合 //是用 路由的别名 name 来去做跳转 //并且是用 params 来去传递参数 //#/thrith // this.$router.push({ // name:'Thrith', // params:{ // pid:'123456' // } // }) this.$router.push({ path:'/thrith' }) }, //第三种方式 也是用 path 来去匹配相应的路由 //传递参数 是用 query来去传递参数 //#/si?pid=1234567 和get请求传递参数 是一致 goSi(){ this.$router.push({ path:'/si', query:{ pid:'1234567' } }) } }
在second ， thrith ， si ，页面取参数
second 页面
//mounted 已经挂载/渲染完成后会自动调用这个函数 mounted(){ //console.log('111') //在vue 提供了 this.$route.params.id 来去获取 动态路由传过来的参数 //获取参数 id 意思 是路由配置中所写的参数 跟router index.js 中设置的名字是一样 var id = this.$route.params.id; console.log(id); //http 请求 把 这个id 当做参数 向后台服务器 请求数据 //拿到result //this.cart = result }
si 页面
//mounted 已经挂载/渲染完成后会自动调用这个函数 mounted(){ var id = this.$route.query.pid; console.log(id); }
thrith 页面
//mounted 已经挂载/渲染完成后会自动调用这个函数 mounted(){ //第二种方式传递的参数 和第一种方传递的参数 获取的时候 都是一致 //第二种方式传递的参数 在刷新过后就不会存在了 //这个方式的传递的参数 安全系数 就比较高 //一般是用在 参数只能够使用一次的 接口 比如 支付 // var id = this.$route.params.pid; // console.log(id); }
动态路由跳转到一个新的页面，第一步，建一个新的页面：
Vue-router，使用英文，来定义路由的参数项
第一步准备一个接收参数的页面
第二步 在vue-router中使用英文冒号：定义路由参数项
使用this.route.params.id获取动态路由传递过来的参数
前端点击跳转到的id页面，完整代码：
<template> <div v-html="code.code"></div> </template> <script> import axios from 'axios'; import '@/css/common/normalize.min.css'; import '@/css/common/style.css'; // import '@/css/' import '@wangeditor/editor/dist/css/style.css' // 引入 css export default { data(){ return { code: [], id: 2 } }, mounted(){ var id = this.$route.params.id; axios.get('/code/selectById/' + id).then(res => { this.code = res.data.data }) console.log(this.article) } } </script> <style> div { word-wrap: normal; font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; -webkit-hyphens: none; hyphens: none; line-height: 1.5; margin: .5em 0; overflow: auto; padding: 1em; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; text-align: left; text-shadow: 0 1px #fff; white-space: pre; word-break: normal; word-spacing: normal; } div { background-color: var(--w-e-textarea-slight-bg-color); border: 1px solid var(--w-e-textarea-slight-border-color); border-radius: 4px 4px; display: block; font-size: 14px; padding: 10px; text-indent: 0; } div { background-color: var(--w-e-textarea-slight-bg-color); border-radius: 3px; font-family: monospace; padding: 3px; } </style>
路由写法：
{ path: '/code/:id', component: () => import('@/views/until/code/codeContainer') },
点击想要跳转的代码：
<div class="container"> <div class="scroll-container clearfix" @click="goDetails(item.id)" style="height: 135px;margin: 0 700px 0 325px;" v-for="item in code" :key="item.id"> <div class="left_Container"> <div style="font-size: 18px;padding: 0 0 90px 0;text-align: left;" >{{ item.title}}</div> <div style="padding: 0 0 0 0;text-align: left;font-size: 14px;"> {{ item.category}}<span style="font-size: 12px;margin-left: 10px;">{{ item.introduce }}</span> </div> </div> <div class="right_Container" style="padding: 10px 0 0 0;"> <img src="@/assets/login.png" alt="" style="width: 158px;height: 112px;"> </div> </div> </div> </div> </template> <!-- <script setup> import editor from 'monaco-editor' const dom = ref("") const initEditor = () => { // 初始化编辑器，确保dom已经渲染 editor.value = monaco.editor.create(dom.value, { theme: 'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark value: dataList.contentValue, //编辑器初始显示文字 readOnly: false, automaticLayout: true, language: "javascript", folding: true, //代码折叠 roundedSelection: false, // 右侧不显示编辑器预览框 autoIndent: true // 自动缩进 }); } </script> --> <script> import axios from 'axios'; export default { data(){ return { code: [], id: 2, url: "http://localhost:9090/code", } }, methods:{ goDetails(id){ this.$router.push({ path: '/code/' + id }) } }, mounted(){ axios.post(this.url + "/list").then(res => { this.code = res.data.data }) } } </script> <style> .right_Container { background-size: 12px !important; } * { margin: 0; padding: 0; } ul li { font-family: 黑体; list-style: none; font-weight: 600; } .clearfix:after { content: ""; display: block; clear: both; } .header { width: 100%; height: 100%; } .logo { height: 60px; background-color: #fff; padding: 12px 0 0 38px; } .logo a { display: block; width: 320px; height: 60px; background: url('@/assets/tuku/logo.png') no-repeat; text-decoration: none; } .logo h1 a div { font-family: "黑体"; font-size: 20px; padding-top: 7px; margin-right: 60px; font-style: italic; } .blueStyle { background: linear-gradient(135deg, #2564b8 56%, #ffffff 84%); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/ /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .search { float: right; margin-right: 430px; margin-top: 10px; border-radius: 50px; } input:focus { outline: none; } .logo { float: left; } .search-style { display: inline-block; padding: 0px 0 1px 10px; border-radius: 18px 0 0 18px; width: 484px; height: 40px; box-sizing: border-box; line-height: inherit; border: 2px solid #418df5; border-right: none; font-size: 14px; } .btn { display: inline-block; color: #fff; font-style: italic; width: 105px; border: 2px solid #418DF5; line-height: 37px; font-weight: 300; background-color: #418DF5; border-radius: 0 16px 16px 0; } .classify { padding-left: 40px; } .classify ul li { float: left; font-size: 17px; font-style: italic; padding-right: 28px; } .userlabel { margin-bottom: 22px; padding: 25px 0 0 38px; } .userlabel ul li { float: left; font-size: 16px; padding: 0 40px 25px 0; font-style: italic; } .left_Container{ float: left; } .right_Container { float: right; } .clearfix:after {content: "";display: block;clear: both;} </style>
效果：点击之后
到了显示页面
