router-link传递参数,query

2019-12-30 10:17:21

参考地址 如何使用router-link对象方式传递参数?

如何使用router-link对象方式传递参数?

疑问:(判断和传参)

点击导航栏目,js如何判断自己点击的是哪个具体栏目?

它们是如何传参的?

如何使用params,携带查询参数?

效果图解说:

A. 点击选择【屈原“查看详情”】之前



B. 点击选择【屈原“查看详情”】之后



要点总结:

在vue-router中,有两大对象被挂载到了实例this;

$route(只读、具备信息的对象);

$router(具备功能的函数)


查询字符串:

去哪里 ?

<router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

导航(查询字符串path不用改)

{name:'detail',path:'/detail',组件}

去了干嘛?获取路由参数(要注意是 query ,还是 params 和 对应的 id 名? 是后者需要注意设置相关文件的id规则)

+ this.$route.query.id

path方式:

去哪里 ?

<router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link>

导航(查询字符串path不用改)

{name:'detail',path:'/detail/:name',组件}

去了干嘛?获取路由参数(要注意是 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

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

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>


  • 2017-04-13 10:57:08

    webstorm 怎么关闭jshint

    You need to configure the inspections in Settings/Editor/Inspections, then in the list on the right, find JavaScript/JavaScript validity issues. That worked for me to remove the Chai warnings. (I am using the WebStorm 11 EAP at the moment.)

  • 2017-04-13 14:11:14

    MySQL中的describe关键字

    今天写代码的时候,有一个类的数据始终不能插入,老是提示在You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe, picPath1, picPath2, picPath3, picPath4, picPath5, agentId, belongStore' at line 1。因为用的是SSH进行插入,所以SQL语句不用自己写,检查了每个字段也没写错。

  • 2017-04-15 13:34:08

    Android官方技术文档翻译——清单合并

    一般情况下,有三种类型的清单文件需要合并成一个最终的应用程序清单,这里按照优先级顺序列出: Product flavors 和构建类型所指定的清单文件。 应用程序的主清单文件。 类库的清单文件。

  • 2017-04-15 21:47:44

    Android开发笔记——圆角和边框们

    在做Android界面开发时,我们往往希望它尽可能优美,尽可能显得专业。于是你看了看其他应用,哇,好多边框和圆角啊。你是不是也想给自己的应用加上边框和圆角效果?呃……那怎么做呢?如果你是从web前端跑到Android来的,那么我想你一定想到了不下三种解决方案。如用图片替代,用CSS3定义,用JS画。在Android中,其实也有类似的用法,本文将简单介绍两种Android圆角和边框的实现。

  • 2017-04-15 21:49:06

    Android样式的开发:Style篇

    前面铺垫了那么多,终于要讲到本系列的终篇,整合所有资源,定义成统一的样式。 哪些该定义成统一的样式呢?举几个例子吧:

  • 2017-04-15 23:54:49

    ViewPager+Fragment取消预加载以及禁止滑动

    取消预加载 网上了解了很多取消预加载的方法,里面提到了使用一个viewpager的public方法setOffscreenPageLimit 经过查看源码以及验证发现该方法是管理Viewpager预加载的页数,最低也是默认为一页(例如ViewPager一共有4页,当前手机屏幕显示第一页

  • 2017-04-15 23:56:30

    onInterceptTouchEvent和onTouchEvent调用关系详解

    如果没有onInterceptTouchEvent,只考虑onTouchEvent的话,比较容易分析和理解。假如有三层布局结构,linearLayout1,linearLayout2,textView,从前到后是包含的关系。那么下面分情况说明。