vue 掛載路由到頭部導航的方法

2019-11-19 14:56:43

字體：大中小

來源：轉載

供稿：網友

路由是寫好了，但正確的切換路由方式不應該是我們在地址欄里面輸入地址，有追求的方式是點擊頭部的導航菜單來切換，就像這樣

我們點擊上面的發現、關注、消息就切換路由導航

我們先把頭部的導航寫好

打開header.vue

先把vue組件的基本格式寫好

然后開始布局寫頭部

這里很不好意思，我一直以為頭部的header.vue是引入了的，實際上并沒有........

打開app,vue重新編寫一下

app.vue 代碼：

<template> <div id="app">  <!-- element-ui 容器布局 -->  <el-container>   <!-- 頭部 -->   <el-header>    <!-- 頭部組件渲染 -->    <header-ly></header-ly>   </el-header>   <!-- 中間主要區域容器 -->   <el-container>    <!-- 添加一個element-ui內置的過渡動畫 -->    <transition name="el-zoom-in-center">     <!-- 通過路由渲染不同內容的頁面 -->     <router-view/>    </transition>   </el-container>   <!-- 底部 -->   <el-footer>    <!-- 底部組件渲染 -->    <footer-ly></footer-ly>   </el-footer>  </el-container> </div></template><script>// 導入組件import HeaderLy from '@/components/header'import FooterLy from '@/components/footer'export default { name: 'app', components: {  HeaderLy,  FooterLy }}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;}</style>

編寫頭部header.vue,這里的代碼基本上可以從element-ui官網上直接copy,地址：http://element-cn.eleme.io/#/zh-CN/

<template> <el-row>  <!-- 左邊logo -->  <el-col :span="4" class="logo">   <img src="../assets/logo.png" alt="">  </el-col>  <!-- 中間導航區域 -->  <el-col :span="16">   <el-menu    :default-active="activeIndex2"    class="menu"    router    mode="horizontal"    @select="handleSelect"    background-color="#545c64"    text-color="#fff"    active-text-color="#ffd04b">    <el-menu-item index="1">處理中心</el-menu-item>    <el-submenu index="2">     <template slot="title">我的工作臺</template>     <el-menu-item index="2-1">選項1</el-menu-item>     <el-menu-item index="2-2">選項2</el-menu-item>     <el-menu-item index="2-3">選項3</el-menu-item>    </el-submenu>    <el-menu-item index="3"><a  rel="external nofollow" target="_blank">訂單管理</a></el-menu-item>   </el-menu>  </el-col>  <!-- 右邊用戶信息以及登陸注冊 -->  <el-button-group>   <el-button type="danger" size="small" round >login</el-button>   <el-button type="success" size="small" round >regin</el-button>  </el-button-group> </el-row></template><script>export default { // ...}</script><style scoped></style>

這個時候瀏覽器中是這樣的

樣子很丑，但這不是重點，我們點擊導航的時候，他直接跳到的是
<el-menu-item index="2-1">xxxxxx<el-menu-item>,這里面的index,所以最笨的辦法就是改index的值就行了，但這樣就不夠靈活了....

一般寫導航的辦法是這樣的

<template> <el-row>  <!-- 左邊logo -->  <el-col :span="4" class="logo">   <img src="../assets/logo.png" alt="">  </el-col>  <!-- 中間導航區域 -->  <el-col :span="16">   <el-menu    :default-active="$route.path"     class="menu"    router    mode="horizontal"    @select="handleSelect"    background-color="#545c64"    text-color="#fff"    active-text-color="#ffd04b">    <!-- 循環寫的路由，其中路由中有 hidden：true 的就不加入循環 -->    <template      v-for="route in $router.options.routes"      v-if="!route.hidden">     <!-- 循環沒有children的路由 -->     <el-menu-item      v-if="!route.hasChild"       :key="route.path"       :index="route.path" >      {{ route.name }}     </el-menu-item>     <!-- 循環有children的路由 -->     <el-submenu v-else :index="route.path">      <template slot="title">{{ route.name }}</template>      <el-menu-item        v-for="child in route.children"        :index="child.path"       :key="child.path">       {{ child.name }}      </el-menu-item>     </el-submenu>    </template>   </el-menu>  </el-col>  <!-- 右邊用戶信息以及登陸注冊 -->  <el-button-group>   <el-button type="danger" size="small" round >login</el-button>   <el-button type="success" size="small" round >regin</el-button>  </el-button-group>   </el-row></template><script>export default { // ... methods: {  handleSelect () {   console.log('菜單選擇之后的回調操作')  } }}</script><style scoped></style>

這樣在瀏覽器中的效果

這樣點擊導航菜單之后的跳轉就完全正常了，這樣寫的好處就是很靈活，如果要加icon圖標的話，也可以直接在router/index.js里面的配置路由部分加個字段class:classname,然后在循環的時候輸出就可以了。當然這里一般是不把首頁這個導航菜單顯示出來的，我們可以直接在路由配置中加個hidden：true 就實現了

就像這樣