详解如何使用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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
jQuery对象和DOM对象相互转化
Apr 24 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
解析php5配置使用pdo
2013/07/03 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python中的包和模块实例
2014/11/22 Python
老生常谈Python基础之字符编码
2017/06/14 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
雅虎笔试题(字符串操作)
2015/03/24 面试题
出纳的岗位职责
2013/11/09 职场文书
教师研修随笔感言
2014/01/23 职场文书
欢送退休感言
2014/02/08 职场文书
《画》教学反思
2014/04/14 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
护理心得体会范文
2016/01/22 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
Python利用FlashText算法实现替换字符串
2022/03/31 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏