【Vue 小练习 】Router路由及嵌套使用

【Vue学习记录 3】 5.2 路由嵌套

目录

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render:c=>c(App),
  router
})

router

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)


const Home = () => import ('@/components/Home')
const Alibaba = ()=> import('@/components/Alibaba.vue')
const Tencent = ()=> import('@/components/Tencent.vue')
const QQ = ()=> import('@/components/TencQQ.vue')
const Wechat = ()=> import('@/components/TencWechat.vue')


export default new Router({
  routes: [
    {path: '/',component:Home},
    {path:'/Alibaba',component:Alibaba},
    {
      path:'/Tencent',
      component:Tencent,
      children:[
        {path: 'QQ',component:QQ},
        {path:'Wechat',component:Wechat}
      ]
    }
  ]
})

默认页

App.vue

<template>
  <div id="app">
    <router-link to='/Alibaba'>阿里巴巴</router-link>
    <router-link to='/Tencent'>腾讯</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style>
</style>

component-Home

<template>
  <div>
    这里是Home的内容
  </div>
</template>

第一层

component-Alibaba

<template>
    <div>
        这儿是阿里巴巴的内容
    </div>
</template>

component-Tencent

<template>
    <div>
        这儿是腾讯的内容 
        <div>
            <router-link to='/Tencent/QQ'>QQ</router-link>
            <router-link to='/Tencent/Wechat'>Wechat</router-link>
            <router-view></router-view>
        </div>
    </div>
</template>

第二层

component-QQ

<template>
    <div>
        我是-腾讯QQ
    </div>
</template>

component-Wechat

<template>
    <div>
        我是腾讯-微信！
    </div>
</template>