{"id":630,"title":"vue-route\u8def\u7531query\u4f20\u53c2\u53ca\u547d\u540d","good":0,"bad":0,"hit":757,"created_at":"2024-01-28 06:24:42","content":"

\u63a5\u4e0a\u4e00\u7ae0\uff1avue-route\u4e13\u95e8\u7528\u6765\u5b9e\u73b0SPA\u5e94\u7528(\u5355\u9875\u5e94\u7528)-\u57fa\u672c\u8def\u7531\u53ca\u591a\u7ea7\u8def\u7531 (hu-rong.com)<\/a><\/strong><\/span><\/p>

\u4f20\u53c2\u6548\u679c\uff1a<\/span><\/p>

\"image.png\"\/<\/span><\/p>

src\/router\/index.js:<\/strong><\/span><\/p>

import VueRouter from 'vue-router'<\/span><\/p>

\/\/\u5f15\u5165\u7ec4\u4ef6<\/span><\/p>

import About from '..\/components\/117\/About.vue'<\/span><\/p>

import Home from '..\/components\/117\/Home.vue'<\/span><\/p>

import News from '..\/components\/117\/News.vue'<\/span><\/p>

import Message from '..\/components\/117\/Message.vue'<\/span><\/p>

import Detail from '..\/components\/117\/Detail.vue'<\/span><\/p>

<\/span><\/p>

\/\/\u521b\u5efa\u8def\u7531\u5668<\/span><\/p>

export default new VueRouter({<\/span><\/p>

    \/*<\/span><\/p>

    \u6ce8\u610f\u8fd9\u91cc\u662froutes\u4e0d\u662frouters\u4e0d\u8981\u5199\u9519\u4e86,<\/span><\/p>

    \u5426\u5219router-view\u4f1a\u5931\u6548\uff0c\u4e14\u63a7\u5236\u53f0\u4f1a\u62a5No routes found in router<\/span><\/p>

    *\/<\/span><\/p>

    routes:[<\/span><\/p>

        {<\/span><\/p>

            path:'\/about',\/\/\u8def\u7531<\/span><\/p>

            component:About,\/\/\u7ec4\u4ef6\u540d<\/span><\/p>

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

        {<\/span><\/p>

            path:'\/home',\/\/\u8def\u7531<\/span><\/p>

            component:Home,\/\/\u7ec4\u4ef6\u540d<\/span><\/p>

            children:[<\/span><\/p>

                {<\/span><\/p>

                    path:'news',\/\/\u5bf9\u5e94home\/news<\/span><\/p>

                    component:News,<\/span><\/p>

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

                {<\/span><\/p>

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

                    component:Message,<\/span><\/p>

                    children:[<\/span><\/span><\/p>

                        {<\/span><\/p>

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

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

                            component:Detail<\/span><\/p>

                        }<\/span><\/p>

                    ]<\/span><\/p>

                }<\/span><\/p>

            ]<\/span><\/p>

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

    ]<\/span><\/p>

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

<\/p>

<\/p>

message.vue<\/strong><\/span><\/p>

<template><\/p>

    <div><\/p>

        <ul><\/p>

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

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

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

            <!--\u7b2c\u4e8c\u79cd\u5199\u6cd5--><\/span><\/p>

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

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

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

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

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

                }<\/span><\/p>

            }"><\/span><\/p>

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

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

--><\/span><\/p>

<\/span><\/p>

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

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

                        name<\/strong>:'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>

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

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

<\/span><\/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>

    }<\/p>

<\/script><\/p>

    <\/p>

<style><\/p>

<\/style><\/p>

<\/p>

detail.vue<\/span><\/strong><\/p>

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

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

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

        <li>\u6d88\u606fid:{{$route.query.id}}<\/li><!--\u6ce8\u610f\u662froute\u4e0d\u662frouter--><\/span><\/span><\/p>

        <li>\u6d88\u606f\u6807\u9898:{{$route.query.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><\/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>"}