详解如何使用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弹出层示例可自定义
May 19 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
原生JS实现九宫格抽奖
Sep 13 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
django 删除数据库表后重新同步的方法
2018/05/27 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
python logging通过json文件配置的步骤
2020/04/27 Python
如何使用Python调整图像大小
2020/09/26 Python
会计岗位职责模板
2014/03/12 职场文书
药剂专业自荐书
2014/06/20 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
欠条样本
2015/07/03 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
Python初学者必备的文件读写指南
2021/06/23 Python
python中super()函数的理解与基本使用
2021/08/30 Python
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
python中的random模块和相关函数详解
2022/04/22 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
Nginx报404错误的详细解决方法
2022/07/23 Servers