详解如何使用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 相关文章推荐
jQuery 渐变下拉菜单
Dec 15 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 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与php5的区别小结(配置异同)
2011/12/20 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
Node.js readline模块与util模块的使用
2018/03/01 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
Vue实现日历小插件
2019/06/26 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Python高效编程技巧
2013/01/07 Python
python数据结构树和二叉树简介
2014/04/29 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python中的推导式使用详解
2015/06/03 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
银行实习人员自我鉴定
2013/09/22 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
上课玩手机检讨书
2014/02/08 职场文书
绿色城市实施方案
2014/03/19 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2015元旦感言
2015/12/09 职场文书
导游词书写之黄山
2019/08/06 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Python音乐爬虫完美绕过反爬
2021/08/30 Python
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python