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-05-06 14:43:53

    bootstrap @media尺寸

    超大屏,1100分辨率,880分辨率,720分辨率,440分辨率以下

  • 2020-05-06 22:23:15

    使用querySelector添加移除style和class

    document.querySelector(selector).style.styleName = 样式 使用这个方法可以对dom节点添加和移除style样式,其中的styleName可以为css样式的任何值,如:display、color

  • 2020-05-07 13:05:28

    JavaScript中批量设置Css样式

    setAttribute() 方法添加指定的属性,并为其赋指定的值。 如果这个指定的属性已存在,则仅设置/更改值

  • 2020-05-07 13:07:21

    scrollBox 跑马灯滚动js

    ​这个插件可以很好的实现跑马灯,以及轮播图等效果,scrollBox js

  • 2020-05-07 13:21:25

    JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧。