电影项目路由配置基础

首先我们要知道路由要再哪个文件夹配置：

我们先要找到src文件夹下面的router文件夹，找到index.js文件

在里面配置路由：

// 导入vue
import Vue from 'vue'
// 导入router路由管理
import VueRouter from 'vue-router'
// 导入home主页面
import HomeView from '../views/HomeView.vue'
// 使用router路由
Vue.use(VueRouter)

const routes = [
  {
    // 路由路径
    path: '/',
    // 路由名字
    name: 'home',
    // 占位符，homeview视图动态组件
    component: HomeView,
    // 重定向一开始的进入的页面
    redirect:'/movie',
    // 子路由
    children:[
      {
        // 子路由：movie
        path:'movie',
        name:'movie',
        // 导入movie的视图路径
        component: () => import('../views/home/Movie.vue'),
        // 重定向，让页面进来是hot视图的那边
        redirect:'/movie/hot',
        // movie的子路由两个子路由组成
        children:[
          {
            // 正在热映的路由也是movie下面的子路由
            path:'hot',
            name:'hot',
            // 导入子路由正在热映的视图路径
            component: () => import('../views/home/Hot.vue'),
          },
          {
            // 即将上映的路由，同样也是movie下面的子路由
            path:'soon',
            name:'soon',
            // 导入子路由，是即将上映的视图路径
            component: () => import('../views/home/Soon.vue'),
          }
        ]
      },
      // 这个是movie的兄弟路由，也就是影院，新闻资讯以及我的路由他们是三个分开来的路由
      {
        // 影院的路由
        path:'cinema',
        name:'cinema',
        component: () => import('../views/home/Cinema.vue')
      },
      {
        // 新闻资源的路由
        path:'news',
        name:'news',
        component: () => import('../views/home/News.vue')
      },
      {
        // 我的路由
        path:'my',
        name:'my',
        component: () => import('../views/home/My.vue')
      }
    ]
  },
  {
    // 正在热映路由的详情路由，每个电影所对应的详情
    path:'/info/:id',
    name:'info',
    component:()=> { return import('../views/Info.vue') }
  },
  {
    // id 电影院id,   fid 某个电影的id  每个影院都带有一个电影的id，地区所对应的影院
    path:'/cinemainfo/:id/:fid',
    name:'cinemainfo',
    component: () => import('../views/Cinemainfo.vue'),
    children:[
      {
        path:':time',
        component: ()=>import('../views/Schedule.vue')
      }
    ]
  },
//城市筛选路由
  {
    path:'/city',
    name:'city',
    component:()=>import('../views/City.vue')
  }
]

const router = new VueRouter({
  routes
})
//导出路由由其他文件导入
export default router

配置好了路由我们要知道他的层级关系是哪样的？

首先我们看原app的视图是啥样

我只准备了几个基本的路由

 一个是电影：movie路由，他的兄弟路由有影院：cinema   资讯：news  以及我的：my

然后电影有两个子路由：正在热映：hot以及即将上映：soon   

然后两个子路由各有一个子路由

 这里要引入vant插件  具体怎么样后面会详细说

 这个即将上映没做子路由的详情，

 这个是影院地址的路由

 这个是定位定时的选项路

在views文件夹有6个路由  分别是影院地址：cinemainfo   城市筛选：city

home路由是主界面路由

info：是movie的详情页而不是子路由

schedule路由：是cinema影院地址的详情路由

app.vue是全局的css样式的作用

 

 我们在views视图文件夹下面创建一个home的文件夹用来存放子路由的，

一个是影院：cinema   一个是电影：movie  一个是movie的子路由hot，以及soon路由

还有一个我的：my  路由一个资讯：news路由

后面会更新项目的后面进度