1. vue路由嵌適用套場景
最近自娛自樂用vue做小東西，覺得路由js里代碼太亂了，就想著用一下路由嵌套來著，我當時小專案場景類似如下場景(當時場景類似JQ開發時主頁面跳轉子頁面)，
但實際路由嵌套是類似jq開發時點擊按鈕顯示隱藏效果，還是我做的太少，太天真了，想著主頁面跳轉子頁面也用路由跳轉來著...
場景總結，只有頁面一部分變，一部分不變才合適用路由嵌套，
2.路由嵌套使用(路由嵌套使用兩個注意點：子路由的path，主組件結構必須加上<router-view></router-view>標簽)
(1).路由path省略寫法（例如下代碼第一條子路由），也可全寫(例如下代碼第二條子路由)
{
path: '/components',
meta: {
footShow: true
},
component: resolve => require(['../pages/components/components.vue'], resolve),
redirect:'/components/view',//可讓父級路由重定向展示想要默認顯示的子組件
children: [{
path: 'tips',
component: resolve => require(['../pages/components/components-pages/tips/tips.vue'], resolve),
},
{
path: '/components/view',
component: resolve => require(['../pages/components/components-pages/view/view.vue'], resolve),
},
{
path: 'tree',
component: resolve => require(['../pages/components/components-pages/tree/tree.vue'], resolve),
},
{
path: 'video',
component: resolve => require(['../pages/components/components-pages/video/video.vue'], resolve),
},
{
path: 'viewImage',
component: resolve => require(['../pages/components/components-pages/viewImage/viewImage.vue'], resolve),
},
]
}(2).必須在主組件合適的地方加<router-view></router-view>標簽，不然子組件不會顯示，
<div class="ui-pane">
<navbar v-if="$route.meta.footShow"></navbar>
<ui-header headertit="組件"><span>抽屜</span></ui-header>
<div class="ui-content">
<arealine linetit="原生組件"></arealine>
<router-view></router-view>
<pageine linetit="tips" to="/components/tips"></pageine>
<pageine linetit="view" to="/components/view"></pageine>
<pageine linetit="viewImage" to="/components/viewImage"></pageine>
<pageine linetit="tree" to="/components/tree"></pageine>
<pageine linetit="video" to="/components/video"></pageine>
</div>
</div>(3).路由嵌套中若需要默認顯示 某一子路由時，可以讓父級路由重定向(redirect:'/components/view');
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/237256.html
標籤：其他
下一篇：Qt 能支持樹莓派開發嗎？