嵌套路由

嵌套路由目录构建

  根目录
    └── src
        ├── 路由
        │   ├── pages
        │   │   ├── sport-news.vue
        │   │   ├── sport.vue
        │   │   └── other.vue
        │   └── App.vue
        ├── router
        │   └──  index.js
        └── main.js 

1. 安装 npm i vue-router@3.5.3
2. 在main.js中导入 App.vue ,并为整个页面设置参数 , 注入路由.

    文件main.js
    
    import  Vue  from  "vue"
    import  App  from  "./路由/App.vue"     //引入App
    import  router from  "./router/index.js"    
    
    Vue.comfig.productionTip = false
    
    let vue = new Vue({
        'router' : router,  //设置参数 ,注入路由
        render: h => h(App),
}).$mount('#app')
  

3. App中设置二级页面的接口 , 并设置导出

    主界面文件App.vue

    <template>
  <div>
    <h1>体育网(一级页面)</h1>
     <router-link to="/sport">体育</router-link>&nbsp;  //二级页面路由
     
     <router-view></router-view>  //导出位置
      </div>
  </template>
  
  <script>
   
  </script>
    <style scoped>
    .router-link-exact-active{
      color: red;
    }
  </style>

4. 子组件中路由设置

    文件sport.vue

    <template>
  <div>
      <p>体育新闻(二级页面)</p>
      <router-link to="/news">国内</router-link>&nbsp;  //三级页面导入路由

      <router-link to="/abc">其他</router-link>   //没有此接口,点击会报404

      <router-view></router-view>  //导出位置
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

5.三级页面

  文件  sport-news.vue
    
    <template>
  <div>
     <p>我是三级页面</p>
     <p>xxx市正在举行马拉松</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

5.在 index.js 导入组件

文件 index.js

import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter) // 使用插件 - 重要

import news from '../路由/pages/sport-news.vue'
import sport from '../路由/pages/sport.vue'
import other from '../路由/pages/other.vue'

const router = new VueRouter({
  routes: [
    {
      path:'/',
      redirect:"/sport"  //设置初始界面
    },
    
    {
      path: "/sport", // 当浏览器访问 http://localhost:8080/#/home时，
      component: sport,  // 装入组件 
      children:[
        {
          path:'/news',    //嵌套页面路由设置
          component: news, 
        },
      ]
    },
       {
      path: "*", 
      component: Pge404  //当没有上面的匹配以上接口时 , 报404错误
    }
    
    export default router   //设置默认导出