这篇文章主要介绍了如何使用router-link对象方式传递参数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
疑问：（判断和传参）
点击导航栏目，js如何判断自己点击的是哪个具体栏目？
它们是如何传参的？
如何使用params，携带查询参数？
本文来源gaodai$ma#com搞$$代**码网效果图解说：
A. 点击选择【屈原“查看详情”】之前
B. 点击选择【屈原“查看详情”】之后
要点总结：
在vue-router中，有两大对象被挂载到了实例this；
$route（只读、具备信息的对象）；
$router（具备功能的函数）
查询字符串：
1.去哪里 ？
xxx
2.导航（查询字符串path不用改）
{name:'detail',path:'/detail',组件}
3.去了干嘛？获取路由参数（要注意是 query ，还是 params 和 对应的 id 名? 是后者需要注意设置相关文件的id规则）
+ this.$route.query.id
path方式：
1.去哪里 ？
xxx
2.导航（查询字符串path不用改）
{name:'detail',path:'/detail/:name',组件}
3.去了干嘛？获取路由参数（要注意是 query ，还是 params 和 对应的 name 名? 是后者需要注意设置相关文件的id规则）
+ this.$route.params.id
相关文件代码：
1. main.js文件
import Vue from 'vue'; import VueRouter from 'vue-router'; //引入主体（页面初始化显示） import App from './components/app.vue'; //一个个link对象 - 分类 import Detail from './components/detail.vue'; import List from './components/list.vue'; //安装插件 Vue.use(VueRouter);//挂载属性 //创建路由对象并配置路由规则 let router = new VueRouter({ //routes routes: [ //一个个link对象 {name: 'detail',path: '/detail',component: Detail}, //此处的path规则不受list.vue中的query（匹配参数规则的）影响 {name: 'list',path: '/list',component: List} ] }); /* new Vue 启动 */ new Vue({ el: '#app', render: c => c(App), //让vue知道我们的路由规则 router:router,//可以简写为router })
2. app.vue文件
<div> <div class="header"> 头部 - 导航栏目 <p> 细节列表1英雄列表1</p></div><!--留坑，非常重要--><div class="footer">底部 - 版权信息</div></div> .header,.main,.footer{text-align: center;padding: 10px;} .header{height:70px;background: yellowgreen;} .main{height:300px;background: skyblue;} .footer{height: 100px;background: hotpink;}
3. list.vue文件
<div> 我是list列表 <!-- :key是绑定器 --><!-- query是查询字符串，加查询参数 ，相当于查询规则；对比参考main.js关于路由配置path属性--><ul> <li> {{hero.name}} 查看详情</li></ul></div> ul,li{list-style: none;}
4. detail.vue文件：（可以在控制台查看打印结果）
<div> 我是详情 </div>
这就是本文的内容。
以上就是详解如何使用router-link对象方式传递参数？的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解如何使用router-link对象方式传递参数？
转载请注明原文链接：详解如何使用router-link对象方式传递参数？
