vue-routerのネストされたルーティング

---

I.はじめに

ネストされたルーティングは非常に一般的な機能です

• たとえば、ホームページで、/ home / newsおよび/ home / messageを介して一部のコンテンツにアクセスしたいとします。
• 1つのパスが1つのコンポーネントをマップし、これら2つのパスにアクセスすると、2つのコンポーネントが別々にレンダリングされます。
  

---

次に、手順を使用します

ネストされたルーティングを実装するには、次の2つの手順があります。

• 対応するサブコンポーネントを作成し、ルートマップで対応するサブルートを設定します
• 内部コンポーネント使用<router-view>のラベル

1.2つのサブルートに対応するコンポーネントを作成します

2、ネストされたアセンブリアウトレットをレンダリングするには、VueRouterでchildren構成に必要なパラメーター

子構成はルート構成と同じように配列であるため、ルートの複数のレイヤーをネストすることもできます。

注：パスの先頭に/ネストするために、ルートパスとして使用され、サブルーティングは増加しません/。ルートを生成するとき、メインルートのパスはサブルートの前に自動的に追加されるため、サブルートのパスはメインルートのパスを再宣言する必要はありません。

//配置路由的信息
import Vue from 'vue'
import Router from 'vue-router'

//路由懒加载
const Home = () => import('../components/Home')
const HomeMessage = () => import('../components/HomeMessage')
const HomeNews = () => import('../components/HomeNews')

Vue.use(Router)

const routes = [
  {
    
    
    path:'',
    redirect:'/home'
  },
  {
    
    
    path: '/home',
    component: Home,
    children:[
      {
    
    
        path:'news', //嵌套路由的时候，路径前边不能加 /
        component:HomeNews
      },
      {
    
    
        path:'message',
        component: HomeMessage
      }
    ]
  }
]

const router = new Router({
    
    
  routes
});

export default router

3.ホームコンポーネントで使用

//Home.vue文件
<template>
  <div>
    <h2 class="title">我是首页Home</h2>
    //注意这里的路径必须是完整的
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    
    
    name: "Home"
  }
</script>

<style scoped>

</style>

この時点で、上記の構成に基づいて、/ homeにアクセスすると、一致するサブルートがないため、router-viewは何もレンダリングしません。何かをレンダリングしたい場合は、空のサブルートを提供できます

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/home', 
      component: Home,
      children: [
        // 当 /home 匹配成功，
        // HomeNews会被渲染在 Home的 <router-view> 中
        // { path:'', redirect:'news'},使用重定向
        {
    
     path: '', component: HomeNews},

        // ...其他子路由
      ]
    }
  ]
})

---

3.情報

ネストされたルーティング| Vueルーターの公式ウェブサイト