vue-router中如何使用嵌套路由，針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比肥鄉(xiāng)網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式肥鄉(xiāng)網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋肥鄉(xiāng)地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

模板抽離

我們已經(jīng)學(xué)習(xí)過了Vue模板的另外定義形式，使用。

  
  
    
首頁
  

  
    
新聞
  

然后js里定義路由組件的時(shí)候：

// 1. 定義（路由）組件。
    const Home = { template: '#home' };
    const News = { template: '#news' };

路由嵌套

實(shí)際應(yīng)用界面，通常由多層嵌套的組件組合而成。

比如，我們 “首頁”組件中，還嵌套著 “登錄”和 “注冊”組件，那么URL對應(yīng)就是/home/login和/home/reg。

  
    
    

      
首頁
       登錄
      注冊
      
      
    
  

這是訪問/home后的模板，其中我們需要把/home/login和/home/reg渲染進(jìn)來。

完成上面代碼后，HTML結(jié)構(gòu)如下圖：

登錄和注冊2個(gè)組件

  
    
登錄界面
  
  
    
注冊界面
  

//定義路由組件
const Login = { template: '#login' };
    const Reg = { template: '#reg' };

3.定義路由

// 2. 定義路由
    const routes = [
       { path: '/', redirect: '/home' },
      { 
        path: '/home', 
        component: Home, 
        children:[
          { path: '/home/login', component: Login},
          { path: '/home/reg', component: Reg}
        ]
      },
      { path: '/news', component: News}
    ]

注意我們在home路由配置了它的children。這就是嵌套路由。

4.案例全部代碼如下：

  
  
  
  

 
  
    

      home
      news