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>


  • 2019-11-07 08:47:00

    详解vue2.6插槽更新v-slot用法总结

    在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。这篇文章主要介绍了详解vue2.6插槽更新v-slot用法总结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  • 2019-11-08 09:34:46

    CSS3 Transition详解和使用

    Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性。 transition-property 用于指定应用过渡属性的名称 transition-duration 用于指定这个过渡的持续时间 transition-delay 用于指定延迟过渡的时间 transition-timing-function 用于指定过渡的类型 transition-property transition-property 用于指定应用过渡的属性名称,可以指定多个属性名称,多个属性名称之间用, 分隔。 默认值为 all 也就是所有的元素都应用过渡效果。 例如,想让容器的宽高有一个过渡的效果,就可以这样写:

  • 2019-11-09 19:16:35

    java标记过期方法

    java注解:@Deprecated(不建议使用的,废弃的);@SuppressWarnings(忽略警告,达到抑制编译器产生警告的目的)

  • 2019-11-12 02:56:39

    使用.htaccess重定向后无法显示图片,CSS失效,该如何处理

    现在我需要把这个域名泛解析到blog目录(*.mydomain.org),同时保持另外两个目录的解析不变。尝试对最后一段作以下修改后(前面的内容不变),出现问题:另两个目录中的网站内的图片无法显示,CSS全部失效。

  • 2019-11-14 11:21:34

    vue中的this指向问题

    ※ 对于普通函数(包括匿名函数),this指的是直接的调用者,在非严格模式下,如果没有直接调用者,this指的是window。showMessage1()里setTimeout使用了匿名函数,this指向 window。 ※ 箭头函数是没有自己的this,在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例,所以它里面使用的this指向vue实例。