この記事の内容は、vue.js の第 2 レベルのルーティングと第 3 レベルのルーティングに関するコード分析です。必要な方は参考にしていただければ幸いです。
なぜ二次および三次ルーティングを使用するのですか?
プロジェクト内に複数の
ルーティングが階層的でなく、複数の
ルートが階層化されている場合、2 番目または 3 番目のルートがトリガーされると、このルートが対応するコンポーネントを置き換えます。コンテンツは親ルーティング コンポーネントの
第 1 レベルのルーティングがトリガーされると、ルートの
子属性配列を第 1 レベルのルートに追加し、第 2 レベルのルートを配置します
ジャンプ後の URL アドレス バーの表示を決定します
//main.js //一级路由 import About from './components/about/About' //二级路由 import Contact from './components/about/Contact' import Delivery from './components/about/Delivery' import History from './components/about/History' import OrderingGuide from './components/about/OrderingGuide' const router= new VueRouter({ routes:[ {path:'/about',name:'about',component:About,children:[ {path:'/about/contsssssssssssssssact',name:'contactLink',component:Contact}, {path:'/history',name:'historyLink',component:History}, {path:'/',name:'deliveryLink',component:Delivery}, {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide}, ]}, {path:'*',redirect:'/'} ], mode:"history" });
Secondary Routingに類似
const router= new VueRouter({ routes:[ {path:'/',name:'home',component:Home}, {path:'/menu',name:'menu',component:Menu}, {path:'/admin',name:'admin',component:Admin}, {path:'/about',name:'about',component:About,redirect: {name:'contactLink'},children:[ //二级路由 {path:'/about/contact',name:'contactLink',component:Contact}, {path:'/history',name:'historyLink',component:History}, {path:'/delivery',name:'deliveryLink',component:Delivery}, {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide,redirect:{name:'phonelink'},children: [ //三级路由 {path:'/phone',name:'phonelink',component:Phone}, {path:'/name',name:'namelink',component:Name} ]}, ]}, {path:'/login',name:'login',component:Login}, {path:'/register',name:'register',component:Register}, {path:'*',redirect:'/'} ], mode:"history" });
関連する推奨事項:
以上がvue.js の 2 次ルーティングと 3 次ルーティングのコード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。