{"id":632,"title":"vue-route\u8def\u7531props","good":0,"bad":0,"hit":661,"created_at":"2024-01-28 07:45:29","content":"

\u4f5c\u7528\uff1a\u8ba9\u8def\u7531\u7ec4\u4ef6\u66f4\u65b9\u4fbf\u63a5\u6536\u53c2\u6570<\/p>

<\/p>

\u5f53\u91c7\u7528\u7b2c2\u79cd\u65b9\u5f0f\u65f6\uff1a\u6ce8\u610f\u8def\u7531\u683c\u5f0fpath<\/span>:<\/span>'detail\/:id\/:title'<\/span>,<\/span><\/span><\/p>

<template><\/span><\/p>

    <div><!--\u8fd9\u4e2adiv\u4e0d\u80fd\u5c11\uff0c\u4e0d\u7136build\u65f6\u4f1a\u5361\u4f4f--><\/span><\/p>

    <ul><\/span><\/p>

        <li>\u6d88\u606fid:{{id}}<\/li><\/span><\/span><\/p>

        <li>\u6d88\u606f\u6807\u9898:{{title}}<\/li><\/span><\/p>

    <\/ul><\/span><\/p>

    <\/div><\/span><\/p>

<\/template><\/span><\/p>

<\/span><\/p>

<script><\/span><\/p>

export default{<\/span><\/p>

    name:'Detail',<\/span><\/p>

    props:['id','title'],<\/span><\/span><\/p>

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

        console.log(this.$route)<\/span><\/p>

    }<\/span><\/p>

}<\/span><\/p>

<\/script><\/span><\/p>

<\/span><\/p>

<style><\/span><\/p>

<\/style><\/span><\/p>

<\/p>

\u91c7\u7528\u7b2c\u4e09\u79cd\u65b9\u5f0f\u65f6\uff0c\u6ce8\u610f\u8def\u7531\u683c\u5f0fquery\u4f20\u53c2\u65b9\u5f0f:?id=xx&title=yyy<\/p>

\u8def\u7531\u914d\u7f6e\uff1a<\/p>

                        {<\/p>

                            name:'xiangqing',\/\/\u8def\u7531\u547d\u540d<\/p>

                            path:'detail',<\/span><\/p>

                            component:Detail,<\/p>

                            \/\/props\u7684\u7b2c\u4e09\u79cd\u5199\u6cd5\uff0c\u503c\u4e3a\u51fd\u6570<\/span><\/p>

                            props($route){<\/span><\/p>

                                return {<\/span><\/p>

                                    id:$route.query.id,<\/span><\/p>

                                    title:$route.query.title<\/span><\/p>

                                }<\/span><\/p>

                            }<\/span><\/p>

                        }<\/p>

\u8df3\u8f6c\u9875\u9762\u8fb9\u63a5\u8981\u7528query\u4f20\u53c2<\/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<\/span>:{<\/p>

                    id:m.id,<\/p>

                    title:m.title<\/p>

                }<\/p>

            }"><\/p>

<\/p>"}