webpack-vue路由嵌套

路由嵌套

添加两个子组件

• login.vue

<template>
  <div>
    <h1>登录插件</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

• register.vue

<template>
  <div>
    <h1>注册插件</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

添加一个父组件

• contain.vue

<template>
  <div>
      <h1>contain组件</h1>
      <h1>{{info.name}}</h1>
      <router-link to="/contain/login">登录</router-link>
      <router-link to="/contain/register">注册</router-link>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
    data() {
        return {
            info:{
                name:"张三",
                age:20
            }
        }
    },
}
</script>

<style>

</style>

子组件要在父组件中调用

在main.js中引入组件，并进行路由的嵌套

import Vue from "vue"

import VueRouter from 'vue-router'

import contain from './contain.vue'
import login from './login.vue'
import register from './register.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [{
        path: "/",
        component: contain,
        children: [{
            path: "/contain/login",
            component: login
        }, {
            path: "/contain/register",
            component: register
        }]
    }]
})

var vm = new Vue({
    el: "#app",
    data: {},
    router
})

在index.html页面中显示

<div id="app" class="container">
        <router-view></router-view>
    </div>

结果展示