{"id":634,"title":"vue-router\u7f16\u7a0b\u5f0f\u8def\u7531\uff08\u4e0d\u501f\u52a9router-link\u6807\u7b7e\u5b9e\u73b0\u8df3\u8f6c\uff0c\u5982\uff1abutton\u70b9\u51fb\u8df3\u8f6c)","good":0,"bad":0,"hit":865,"created_at":"2024-01-28 08:27:18","content":"

<template><\/p>

    <div><\/p>

        <ul><\/p>

        <li v-for="m in messageList" :key="m.id"><\/p>

            <!--query\u4f20\u53c2\u7b2c\u4e00\u79cd\u5199\u6cd5:\u4e0d\u63a8\u8350--><\/p>

            <!-- <router-link :to="`\/home\/message\/detail?id=${m.id}&title=${m.title}`">{{m.title}}<\/router-link>&nbsp;&nbsp; --><\/p>

            <!--query\u7b2c\u4e8c\u79cd\u5199\u6cd5:\u5bf9\u8c61\u5199\u6cd5--><\/p>

            <!-- <router-link :to="{<\/p>

                path:'\/home\/message\/detail',<\/p>

                query:{<\/p>

                    id:m.id,<\/p>

                    title:m.title<\/p>

                }<\/p>

            }"><\/p>

                {{ m.title }}<\/p>

            <\/router-link> --><\/p>

            <!--query\u7b2c\u4e09\u79cd\u5199\u6cd5:\u8def\u7531\u540d\u79f0--><\/p>

            <router-link :to="{<\/p>

                name:'xiangqing',\/\/\u6ce8\u610f\u8fd9\u91cc\u662fname\u4e0d\u662fpath<\/p>

                query:{<\/p>

                    id:m.id,<\/p>

                    title:m.title<\/p>

                }<\/p>

            }"><\/p>

                {{ m.title }}<\/p>

                <button @click="pushShow(m)"><\/button><\/span><\/p>

            <\/router-link><\/p>

            <!-- <router-link :to="{<\/p>

                name:'xiangqing',\/\/\u6ce8\u610f\u8fd9\u91cc\u662fname\u4e0d\u662fpath<\/p>

                params:{\/\/\u8fd9\u91cc\u662fparams\u4e0d\u662fquery<\/p>

                    id:m.id,<\/p>

                    title:m.title<\/p>

                }<\/p>

            }"><\/p>

                {{ m.title }}<\/p>

            <\/router-link> --><\/p>

        <\/li><\/p>

        <\/ul><\/p>

        <hr\/><\/p>

        <router-view><\/router-view><\/p>

    <\/div><\/p>

<\/template><\/p>

    <\/p>

<script><\/p>

    export default {<\/p>

        name:'Message',<\/p>

        data(){<\/p>

            return {<\/p>

                messageList:[<\/p>

                    {id:'001',title:'\u6d88\u606f001'},<\/p>

                    {id:'002',title:'\u6d88\u606f002'},<\/p>

                    {id:'003',title:'\u6d88\u606f003'},<\/p>

                ]<\/p>

            }<\/p>

        },<\/p>

        methods:{<\/span><\/p>

            pushShow(m){<\/span><\/p>

                this.$router.push({\/\/\u5982\u679c\u8981\u7528replace\u5c06\u8fd9\u91cc\u7684push\u6539\u6389\u5373\u53ef<\/span><\/p>

                    name:'xiangqing',\/\/\u6ce8\u610f\u8fd9\u91cc\u662fname\u4e0d\u662fpath<\/span><\/p>

                    query:{<\/span><\/p>

                        id:m.id,<\/span><\/p>

                        title:m.title<\/span><\/p>

                    }<\/span><\/p>

                });<\/span><\/p>

            },<\/span><\/p>

            back(){<\/span><\/p>

                \/\/\u540e\u9000<\/span><\/p>

                this.$router.back()<\/span><\/p>

            },<\/span><\/p>

            forward(){<\/span><\/p>

                \/\/\u524d\u8fdb<\/span><\/p>

                this.$router.forward()<\/span><\/p>

            },<\/span><\/p>

            test(){<\/span><\/p>

                \/\/\u524d\u8fdb\u6216\u540e\u9000\u51e0\u6b65\uff0c\u540e\u9000\u7528\u8d1f\u6570<\/span><\/p>

                this.$router.go(3)<\/span><\/p>

            }<\/span><\/p>

        }<\/p>

    }<\/p>

<\/script><\/p>

    <\/p>

<style><\/p>

<\/style><\/p>

<\/p>"}