详解如何使用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 删除字符串最后一个字符的方法解析
Feb 11 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
flexible.js实现移动端rem适配方案
Apr 07 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
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
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
Django中几种重定向方法
2015/04/28 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python实现根据文件格式分类
2019/10/31 Python
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
高三自我鉴定
2013/10/23 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
先进工作者推荐材料
2014/12/23 职场文书
安全保证书
2015/01/16 职场文书
运动会宣传语
2015/07/13 职场文书
公司借款担保书
2015/09/22 职场文书
高二语文教学反思
2016/02/16 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB