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>


  • 2020-12-18 17:15:29

    coTurn stun服务器搭建,禁用turn

    https://github.com/coturn/coturn 在这里git clone 下来然后编译安装,一切默认即可。编译后,也可以不用安装。在编译目录下bin文件夹下有turnserver turnutils_stunclient turnutils_uclient 这三个等一下会用到的软件。

  • 2020-12-18 17:26:25

    coturn配置文件详细解释

    Coturn 是webrtc,p2p视频通话必不少的,主要包含2个主要功能stun服务, turn服务 Coturn 的githup地址为 https://github.com/coturn/coturn/

  • 2020-12-21 06:26:16

    为UIView添加点击事件

    最近经常碰到要将UIImageView和UILabel看成整体的情况,我于是就将他俩用UIView包起来,那么怎么给一个UIView添加点击事件,可以这么实现:

  • 2020-12-21 09:00:20

    Window.matchMedia() 方法详解

    matchMedia() 返回一个新的 MediaQueryList 对象,表示指定的媒体查询字符串解析后的结果。 matchMedia() 方法的值可以是任何一个 CSS @media 规则 的特性, 如 min-height, min-width, orientation 等。 MediaQueryList 对象有以下两个属性:

  • 2020-12-21 09:42:42

    iframe.contentWindow 操作iframe

    注:iframe.contentWindow这里,返回的是iframe的window对象,所以后面可以接着调用document方法,再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。

  • 2020-12-21 14:00:19

    iframe + postMessage跨域通信

    在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反。

  • 2020-12-22 12:02:41

    ios开发优秀的开源框架,demo集合

    期待大家和我们一起共同维护,同时也期望大家随时能提出宝贵的意见(直接提交issues即可)。请广大网友只按照目录结构(即使目录结构有问题)添加三方库,并提交pull request。目录问题大家提出issues后楼主会及时更改的。