{"id":637,"title":"vue\u4e4bhash\u4e0ehistory\u6a21\u5f0f-\u53bb\u6389url\u4e2d\u7684#\u53f7","good":0,"bad":0,"hit":758,"created_at":"2024-01-28 10:01:43","content":"

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

const router = new VueRouter({<\/span><\/p>

    mode:'history',\/\/\u5f71\u54cd\u8def\u7531\u4e2d\u7684\u6548\u679c\uff0c\u9ed8\u8ba4\u503c\u662fhash,\u8def\u7531\u4f1a\u6709#\u53f7\uff0chistory\u5219\u6ca1\u6709\u4f46\u517c\u5bb9\u6027\u5dee\u4e00\u4e9b,\u4e0a\u7ebf\u540eurl\u4f1a\u88ab\u5f53\u6210\u8d44\u6e90\u5bfc\u81f4404\u9519\u8bef\uff0chttp:\/\/localhost:8080\/#\/home\/<\/span><\/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>

            meta:{title:'\u5173\u4e8e\u6211'},<\/span><\/p>

            \/\/\u72ec\u4eab\u8def\u7531\u5b88\u536b<\/span><\/p>

            beforeEnter:(to,from,next)=>{<\/span><\/p>

                \/\/\u53ef\u4ee5\u52a0\u4e00\u4e9b\u903b\u8f91\u5230\u8fd9\u91cc<\/span><\/p>

                next()<\/span><\/p>

            }<\/span><\/p>

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

        {<\/span><\/p>

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

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

            meta:{title:'\u9996\u9875'},<\/span><\/p>

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

                {<\/span><\/p>

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

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

                    meta:{title:'\u65b0\u95fb'},<\/span><\/p>

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

                {<\/span><\/p>

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

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

                    meta:{title:'\u6d88\u606f'},<\/span><\/p>

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

                        \/\/query\u4f20\u53c2\u65b9\u5f0f:?id=xx&title=yyy<\/span><\/p>

                        {<\/span><\/p>

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

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

                            component:Detail,<\/span><\/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>

                            \/\/\u662f\u5426\u8981\u9a8c\u8bc1\u6743\u9650<\/span><\/p>

                            meta:{title:'\u8be6\u60c5',isAuth:true}<\/span><\/p>

                        }<\/span><\/p>

                        \/\/params\u4f20\u53c2\u65b9\u5f0f:id\/xx\/title\/yyy<\/span><\/p>

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

                        \/\/     name:'xiangqing',\/\/\u8def\u7531\u547d\u540d,params\u65b9\u5f0f\u5fc5\u987b\u7528name\u65b9\u5f0f<\/span><\/p>

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

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

                        \/\/     \/\/props\u7684\u7b2c\u4e00\u79cd\u5199\u6cd5\uff0c\u4ec0\u4e3a\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u4e2d\u7684\u6240\u6709key-value\u90fd\u4f1a\u4ee5props\u7684\u5f62\u5f0f\u4f20\u7ed9detail\u7ec4\u4ef6<\/span><\/p>

                        \/\/     \/\/props:{a:1,b:'hello'}<\/span><\/p>

                        \/\/     \/\/props\u7684\u7b2c\u4e8c\u79cd\u5199\u6cd5\uff0c\u503c\u4e3a\u5e03\u5c14\u503c\uff0c\u82e5\u4e3atrue\uff0c\u5c31\u4f1a\u628a\u8be5\u8def\u7531\u7ec4\u4ef6\u6536\u5230\u7684\u6240\u6709params\u53c2\u6570\uff0c\u4ee5props\u7684\u5f62\u5f0f\u4f20\u7ed9detail\u7ec4\u4ef6<\/span><\/p>

                        \/\/     \/\/props:true,\/\/\u6ce8\u610f\uff0c\u8fd9\u79cd\u53ea\u80fd\u9002\u7528params\u4f20\u53c2\u5f62\u5f0f\uff0c\u4e0d\u80fd\u9002\u7528query\u4f20\u53c2<\/span><\/p>

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

                    ]<\/span><\/p>

                }<\/span><\/p>

            ]<\/span><\/p>

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

    ]<\/span><\/p>

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

<\/span><\/p>

\/\/\u5168\u5c40\u524d\u7aef\u8def\u7531\u5b88\u536b<\/span><\/p>

\/\/\u8def\u7531\u5207\u6362\u4e4b\u524d\u88ab\u8c03\u7528\uff0c\u53ef\u4ee5\u7528\u6765\u505a\u6743\u9650\u63a7\u5236\u6216\u8bbe\u7f6e\u9875\u9762title\u7b49<\/span><\/p>

router.beforeEach((to,from,next)=>{<\/span><\/p>

    \/\/\u8bbe\u7f6e\u9875\u9762title<\/span><\/p>

    document.title=to.meta.title<\/span><\/p>

    \/\/ if(localStorage.getItem('xxxx')==='xxx'){<\/span><\/p>

    \/\/\u5982\u679c\u6709\u5f88\u591a\u8def\u7531\u8981\u5224\u65ad\u5c31\u4e0d\u4e0d\u597d\u5199\u4e86\uff0c\u5728\u8def\u7531\u914d\u7f6e\u4e0a\u52a0meta:{isAuth:false\u6216true}<\/span><\/p>

    \/\/if(to.path==='\/home\/news'||to.path==='\/home\/message'){<\/span><\/p>

    \/\/if(!to.meta.isAuth){<\/span><\/p>

        next()\/\/\u653e\u884c<\/span><\/p>

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

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

\/\/\u5168\u5c40\u540e\u7f6e\u8def\u7531\uff0c\u521d\u59cb\u5316\u65f6\u6267\u884c\u3001\u6bcf\u6b21\u8def\u7531\u5207\u6362\u4e4b\u540e\u88ab\u8c03\u7528<\/span><\/p>

router.afterEach((to,from)=>{<\/span><\/p>

<\/span><\/p>

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

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

<\/p>"}