详解如何使用router-link对象方式传递参数?


Posted in Javascript onMay 02, 2019

疑问:(判断和传参)

点击导航栏目,js如何判断自己点击的是哪个具体栏目?
它们是如何传参的?
如何使用params,携带查询参数?

效果图解说:

A. 点击选择【屈原“查看详情”】之前

详解如何使用router-link对象方式传递参数?

B. 点击选择【屈原“查看详情”】之后

详解如何使用router-link对象方式传递参数?

要点总结:

在vue-router中,有两大对象被挂载到了实例this;
$route(只读、具备信息的对象);
$router(具备功能的函数)

查询字符串:

1.去哪里 ?

<router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

2.导航(查询字符串path不用改)

{name:'detail',path:'/detail',组件}

3.去了干嘛?获取路由参数(要注意是 query ,还是 params 和 对应的 id 名? 是后者需要注意设置相关文件的id规则)

+ this.$route.query.id

path方式:

1.去哪里 ?

<router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link>

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文件

<template>
 <div>
  <div class="header">
    头部 - 导航栏目

    <p>
      <router-link :to="{name:'detail'}">细节列表1</router-link>
      <router-link :to="{name:'list'}">英雄列表1</router-link>
    </p>
  </div>

  <!--留坑,非常重要-->
    <router-view class="main"></router-view>

    <div class="footer">底部 - 版权信息</div>

 </div>
</template>

<script>


  export default {
   data(){
    return{

    }
   },
   methods:{

   }
  }
</script>

<style scoped>
  .header,.main,.footer{text-align: center;padding: 10px;}

  .header{height:70px;background: yellowgreen;}
  .main{height:300px;background: skyblue;}
  .footer{height: 100px;background: hotpink;}
</style>

3. list.vue文件

<template>
  <div>
    我是list列表
    <!-- :key是绑定器 -->
    <!-- query是查询字符串,加查询参数 ,相当于查询规则;对比参考main.js关于路由配置path属性-->
    <ul>
      <li v-for="(hero,index) in heros" :key="index">
        {{hero.name}}
        <router-link :to="{name:'detail',query:{id:index}}">查看详情</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        heros:[{
          name:'李白'
        },{
          name:'杜甫'
        },{
          name:'屈原'
        },{
          name:'白居易'
        },{
          name:'李清照'
        },{
          name:'欧阳修'
        }]
      }
    }
  }
</script>

<style scoped> 
  ul,li{list-style: none;}
</style>

4. detail.vue文件:(可以在控制台查看打印结果)

<template>
  <div>
    我是详情
  </div>
</template>

<script>
  export default{
    data(){
      return{

      }
    },//DOM尚未生成
    create(){
      //获取路由参数
      //vue-router中挂载两个对象的属性
      //$route(信息数据)
      //$router(功能函数)
      /*console.log(this.$route.params);*/
      console.log(this.$route.query);

    },//已经将数据装载到页面上去了,DOM已经生成
    mounted(){

    }
  }
</script>

<style>
</style>

这就是本文的内容。

以上所述是小编给大家介绍的如何使用router-link对象方式传递参数详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
详解Vue底部导航栏组件
May 02 #Javascript
微信小程序搭建自己的Https服务器
May 02 #Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 #Javascript
详解微信小程序网络请求接口封装实例
May 02 #Javascript
vue 搭建后台系统模块化开发详解
May 01 #Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 #Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 #Javascript
You might like
PHP4实际应用经验篇(9)
2006/10/09 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
js的一些常用方法小结
2011/06/29 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
Python列表删除的三种方法代码分享
2017/10/31 Python
QML用PathView实现轮播图
2020/06/03 Python
Linux上比较文件的命令都有哪些
2012/02/24 面试题
初中生学习的自我评价
2013/11/14 职场文书
超市中秋节促销方案
2014/03/21 职场文书
小学英语课后反思
2014/04/26 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
技术员个人工作总结
2015/03/03 职场文书
护士自荐信范文
2015/03/25 职场文书
电影红河谷观后感
2015/06/11 职场文书
人与自然观后感
2015/06/16 职场文书
计算机教师工作总结
2015/08/13 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
Javascript 解构赋值详情
2021/11/17 Javascript
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记