vue.js中二级路由和三级路由的代码解析

心已赠人 2024-04-18 09:00 23阅读 0赞

# vue.js中二级路由和三级路由的代码解析 #

本篇文章给大家带来的内容是关于vue.js中二级路由和三级路由的代码解析 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

为什么要用二级和三级路由？

当项目中 有多个 <router-view> 时，就必须使用分级路由；

如果路由不分级，又有多个 <router-view> ,全部都是定义为一级路由，那么项目中的 <router-view> 的内容显示就会混乱；这是不友好的；

如果对路由进行分级，那么当触发某个二级或三级路由时，此路由就会将对应组件内容传给自己的父级路由组件里面的 <router-view>，这样就不会混乱；

一级路由被触发时，自然会找自己所注册的根组件的<router-view>

### 二级路由 ###

为一级路由添加一个 children 属性数组，并将二级路由放入；

path 属性 决定 跳转后 url 地址栏的的显示  
![70][]

![70 1][]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </td> 
 <td> <code>//main.js</code> <code>//一级路由</code> <code>import About from </code><code>'./components/about/About'</code> &nbsp; &nbsp; <code>//二级路由</code> <code>import Contact from </code><code>'./components/about/Contact'</code> <code>import Delivery from </code><code>'./components/about/Delivery'</code> <code>import History from </code><code>'./components/about/History'</code> <code>import OrderingGuide from </code><code>'./components/about/OrderingGuide'</code> &nbsp; <code>const router= </code><code>new</code> <code>VueRouter({ </code> <code>&nbsp;&nbsp;</code><code>routes:[</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/about'</code><code>,name:</code><code>'about'</code><code>,component:About,children:[</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/about/contsssssssssssssssact'</code><code>,name:</code><code>'contactLink'</code><code>,component:Contact},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/history'</code><code>,name:</code><code>'historyLink'</code><code>,component:History},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/'</code><code>,name:</code><code>'deliveryLink'</code><code>,component:Delivery},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/orderingGuide'</code><code>,name:</code><code>'orderingGuideLink'</code><code>,component:OrderingGuide},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>]},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'*'</code><code>,redirect:</code><code>'/'</code><code>}</code> <code>&nbsp;&nbsp;</code><code>],</code> <code>&nbsp;&nbsp;</code><code>mode:</code><code>"history"</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

### 三级路由 ###

和二级路由差不多

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </td> 
 <td> <code>const router= </code><code>new</code> <code>VueRouter({ </code> <code>&nbsp;&nbsp;</code><code>routes:[</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/'</code><code>,name:</code><code>'home'</code><code>,component:Home},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/menu'</code><code>,name:</code><code>'menu'</code><code>,component:Menu},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/admin'</code><code>,name:</code><code>'admin'</code><code>,component:Admin},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/about'</code><code>,name:</code><code>'about'</code><code>,component:About,redirect: {name:</code><code>'contactLink'</code><code>},children:[&nbsp;&nbsp; </code><code>//二级路由</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/about/contact'</code><code>,name:</code><code>'contactLink'</code><code>,component:Contact},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/history'</code><code>,name:</code><code>'historyLink'</code><code>,component:History},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/delivery'</code><code>,name:</code><code>'deliveryLink'</code><code>,component:Delivery},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/orderingGuide'</code><code>,name:</code><code>'orderingGuideLink'</code><code>,component:OrderingGuide,redirect:{name:</code><code>'phonelink'</code><code>},children: [&nbsp; </code><code>//三级路由</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/phone'</code><code>,name:</code><code>'phonelink'</code><code>,component:Phone},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/name'</code><code>,name:</code><code>'namelink'</code><code>,component:Name}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>]},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>]},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/login'</code><code>,name:</code><code>'login'</code><code>,component:Login},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'/register'</code><code>,name:</code><code>'register'</code><code>,component:Register},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{path:</code><code>'*'</code><code>,redirect:</code><code>'/'</code><code>}</code> <code>&nbsp;&nbsp;</code><code>],</code> <code>&nbsp;&nbsp;</code><code>mode:</code><code>"history"</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

[70]: https://img-blog.csdn.net/20180822153740862?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDg5NTAz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180822153810309?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDg5NTAz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70