二十六、进阶之二级路由

（1）二级路由的解释

#后，前面的一个路径不变，后面的路径在变化

（2）访问Film的两个子组件Nowplaying和Comingsoon

在二十四和二十五节的基础上

（2.1）首先在views/Films下创建子组件Nowplaying和Comingsoon

（2.2）在Film组件中插入子组件

在router/index.js中会创建Film组件的两个孩子路径，

（2.3）在router/index.js中创建Film组件的两个孩子路径

（2.4）效果图

 

(2.5) 添加重定向功能

访问http://localhost:8080/时，或 访问http://localhost:8080/#/film时，都重定向到如下页面

（2.6）代码

1. router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router' //引入下载的路由
//引入三个组件
import Film from '@/views/Film' //.js可以省略
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'
//引入film的两个孩子组件
import Comingsoon from '@/views/Films/Comingsoon'
import Nowplaying from '@/views/Films/Nowplaying'

Vue.use(VueRouter)//使用注册路由插件

const route = new VueRouter({
  routes:[ //定义多个路由routes
    {
      path:"/film", //如果路径是film，则加载的是Film组件
      component:Film,
      children:[//定义film的下一级路径nowplaying和  
        {
          path:"/film/nowplaying",
          component:Nowplaying
        },
        {
          path:"/film/comingsoon",
          component:Comingsoon
        },
        {
          path:"", //即访问.../film时，进行重定向
          redirect: "/film/nowplaying"
        }
      ]
    },
    {
      path:"/cinema", //如果路径是cinema，则加载的是Cinema组件
      component:Cinema
    },
    {
      path:"/center",
      component:Center
    },
    {
      path:"*", //表示除了上述路径（/film、/cinema、/center）的其他路径
      redirect:'/film' //重定向到/film
    }
  ]
})
export default route //导出路由

2. views/Film.vue

<template>
    <div>
        <div>轮播</div>
        <div>film-header</div>
        
        <!--路由容器，类似插槽。以便路由组件的显示
            假设film有两个子组件：Comingsoon 和 Nowplaying（存放在views/Films下）
        -->
        <router-view></router-view>
    </div>
</template>

3.App.vue

<template>
  <div>
    <tabbar></tabbar>
    <!--路由容器，类似插槽。以便路由组件的显示-->
    <router-view></router-view>
  </div>
</template>

<script>

 //导入Tabbar组件
 import tabbar from '@/components/Tabbar'

 import axios from 'axios'

  export default{
    data(){
      return{
        datalist:[],
      }
    },
    components: {//定义局部组件
      tabbar
    },
  //  mounted () {//进行ajax请求，将获取到的该网站的信息显示到控制台
  //   //原网址https://m.maoyan.com/ajax/movieOnInfoList?token=
  //    axios.get("/ajax/movieOnInfoList?token=").then(res=>{
  //      console.log(res.data)
  //    })
  //  },

  }
  
</script>

<style lang="scss">
/*lang="scss"表示style中支持scss语法*/
  
</style>