鍍金池/ 問(wèn)答/HTML/ 關(guān)于命名路由跳轉(zhuǎn)。

關(guān)于命名路由跳轉(zhuǎn)。

新手,在router遇到了一些問(wèn)題,自己研究著解決了很久沒(méi)結(jié)局屌,想問(wèn)一下大神命名路由的跳轉(zhuǎn)問(wèn)題。

<template>
  <div class="clearfix">
    <TopNavigationBar></TopNavigationBar> 
      <SideNavigation></SideNavigation> 
      <div class="main-right">
        <router-view name="SecondTitle"></router-view>
        <router-view name="table"></router-view>
      </div>
    </div>
  </div>
</template>
這是整個(gè)的布局文件,底部寫(xiě)入了兩個(gè)router-view的標(biāo)簽,分別對(duì)應(yīng)兩個(gè)組件。一個(gè)是二級(jí)標(biāo)題,
另一個(gè)是點(diǎn)擊二級(jí)標(biāo)題之后route出來(lái)的組件。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
這是根組件,app.vue文件,里面放了一個(gè)默認(rèn)的router-view,首先在登錄界面,然后router到首頁(yè),再由首頁(yè)的小組件router出其他的組件。

routes: [
    {
        //登錄頁(yè)
        path: '/',
        name: 'login',
        component: ()=>import('@/views/login/login')
    },
    {
        //首頁(yè)
        path: '/layout',
        name: 'layout',
        // redirect: 'layout/TwoLevelHeadlines',
        component: ()=>import('@/views/layout/AppMain'),
        children: [{
            //基礎(chǔ)設(shè)置
            name: 'BasicSettingsTitle',
            path: 'BasicSettingsTitle',
            components: {
                SecondTitle: ()=>import('@/views/layout/SecondTitle/BasicSettingsTitle'),
            },
            //table內(nèi)容
            children: [{
                name: 'department',
                path: 'department',
                components: {
                    table: ()=>import('@/views/supplier/basicSettings/department')
                }
            }]
        }

這是router的文件代碼,寫(xiě)明了一些路徑,到基礎(chǔ)設(shè)置都是正常的,只有最后面的children中的組件無(wú)法被路由到

<el-menu-item index="/layout/BasicSettingsTitle/department">部門(mén)設(shè)置</el-menu-item>

這個(gè)是部門(mén)設(shè)置按鈕的代碼

clipboard.png
頁(yè)面url的地址已經(jīng)更新,但是沒(méi)有刷出組件來(lái),找了很久沒(méi)找到問(wèn)題,想請(qǐng)大神們幫忙看一下哪里有問(wèn)題

回答
編輯回答
舊時(shí)光

你的SecondTitletable2個(gè)router-view是同級(jí)的,但是把table渲染在SecondTitlechildren里面肯定出不來(lái)啊,除非SecondTitle渲染出來(lái)的組件里面也有個(gè)name=tablerouter-view
如果你一定要把他們當(dāng)成同級(jí)的,大概是這樣寫(xiě)的,沒(méi)實(shí)測(cè),體會(huì)一下代碼意思自己改

{
  //首頁(yè)
  path: '/layout',
  name: 'layout',
  // redirect: 'layout/TwoLevelHeadlines',
  component: () => import('@/views/layout/AppMain'),
  children: [
    //部門(mén)設(shè)置
    {
      name: 'department',
      path: 'BasicSettingsTitle/department',
      components: {
        SecondTitle: () => import('@/views/layout/SecondTitle/BasicSettingsTitle'),
        table: () => import('@/views/supplier/basicSettings/department')
      }
    },
    //用戶管理
    {
      name: 'userment',
      path: 'BasicSettingsTitle/userment',
      components: {
        SecondTitle: () => import('@/views/layout/SecondTitle/BasicSettingsTitle'),
        table: () => import('@/views/supplier/basicSettings/userment')
      }
    },
  ]
}
2018年3月31日 11:12