详解如何使用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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
Js sort排序使用方法
Oct 17 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jquery图形密码实现方法
Mar 11 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 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
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
python僵尸进程产生的原因
2017/07/21 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
安全教育月活动总结
2014/05/05 职场文书
校园环保建议书
2014/05/14 职场文书
开学典礼校长致辞
2015/07/29 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
python 模块重载的五种方法
2021/04/24 Python
MongoDB支持的索引类型
2022/04/11 MongoDB