Vue2.0 Vue路由 query配置项

Message.vue

<template>
    <div>
        <ul> 
            <li v-for="m in megList" :key="m.id">
                <router-link to="/home/message/detil?id=666&name=你好">{{m.name}}</router-link>
            </li>
            <hr />
            <router-view></router-view>
        </ul>
    </div>
</template>

<script>
import { nanoid } from 'nanoid'
    export default {
        name:'Message',
        components:{},
        data(){
            return{
                newMeg:['消息1','消息2','消息3'],
                megList:[
                    {
                        id:nanoid(),
                        name: '消息1'
                    },
                    {
                        id:nanoid(),
                        name: '消息2'
                    },
                    {
                        id:nanoid(),
                        name: '消息3'
                    },
                ]
            }
        }
    }
</script>

<style scoped>

</style>

一般写的时候有消息的时候只写一个路由组件

点击消息1的时候，能不能把消息1的id,还有消息1的name传递过来，整个步骤不会出现<组件名 />

创建Detil.vue

<template>
    <div>
        <ul>
            <li>消息编号:???</li>
            <li>消息的名字:???</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Detil',
        components:{},
    }
</script>

<style scoped>

</style>

考虑到你要路由在哪

router > index.js

.....
{
    path:'message',
    component:Messgae,
    children:[
        {
            path:"detil",
            component: Detil,
        }
    ]
}

---

接下来要做的就是点击消息1出现消息1的信息;点击消息2出现消息2的信息…(把不同的数据带过去)

路由能接收俩个参数:

• 1.query参数(跟ajax里的query参数几乎是一样的)

  • 通过?的形式传递参数

  • 假如传过去的参数是:<router-link to="/home/message/detil?id=666&name=你好">{{m.name}}</router-link>

  • Detil.vue里面有一个参数就比较重要了

    mounted(){
        console.log(this.$route)//$route:能够得到这个路由配置的相关信息
    }
    

    控制台输出:

    {name: undefined, meta: {…}, path: '/home/message/detil', hash: '', query: {…}, …}
        fullPath: "/home/message/detil?id=666&name=%E4%BD%A0%E5%A5%BD"
        hash: ""
        matched: (3) [{…}, {…}, {…}]
        meta: {}
        name: undefined
        params: {}
        path: "/home/message/detil"
        query: {id: '666', name: '你好'}
        [[Prototype]]: Object
    

    我们就知道怎么写了:

    <template>
        <div>
            <ul>
                <li>消息编号:{{$route.query.id}}</li>
                <li>消息的名字:{{$route.query.name}}</li>
            </ul>
        </div>
    </template>
    

    那怎么修改？

    如果这么改:

    <router-link :to="/home/message/detil?id=m.id&name=m.name">{{m.name}}</router-link>
    

    这样路径和数值都是js表达式

    那就可以试着写模板字符串:

    <!-- 跳转路由并携带query参数,to的字符串写法 -->
    <router-link :to="`/home/message/detil?id=${m.id}&name=${m.name}`">{{m.name}}</router-link>
    

    还有一种写法:

    <!-- 跳转路由并携带query参数,to的对象写法 -->
    <router-link :to="{
        //to对象里面能写俩个属性
        //1.path
        path: '/home/message/detil',
        //2.query
        query:{
            id: m.id,
            name: m.name
        }
    }">
        {{m.name}}
    </router-link>
    

    需要并且繁琐的时候可以写成对象的形式

总结

路由的query参数

1.传递参数

<!-- 跳转路由并携带query参数,to的字符串写法 -->
<router-link :to="`/home/message/detil?id=${m.id}&name=${m.name}`">{{m.name}}</router-link>

<!-- 跳转路由并携带query参数,to的对象写法 -->
<router-link :to="{
    //to对象里面能写俩个属性
    //1.path
    path: '/home/message/detil',
    //2.query
    query:{
        id: m.id,
        name: m.name
    }
}">
    {{m.name}}
</router-link>

2.接收参数

$route.query.id
$route.query.name