03.vue-router路由（一级路由、二级路由、路由声明式导航、路由重定向）

路由使用的module是vue-router，在脚手架创建项目的时候，已经下载好了

一级路由配置

1.配置路由文件

//===>src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Film from '@/views/Film'
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'

Vue.use(VueRouter)

const routes = [
  {
    path: '/film',
    component: Film
  },
  {
    path: '/cinema',
    component: Cinema
  },
  {
    path: '/center',
    component: Center
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2.新建Film、Cinema、Center三个组件

//===>src/views/Center.vue

//===>src/views/Cinema.vue

//===>src/views/Film.vue

3.路由展示位置

//===>src/App.vue

运行一下试试

路由声明式导航

1.src/App.vue

2.编写Tabber.vue导航栏组件
router-link：路由组件
to：想要跳转的路由地址
tag：想要变成什么标签
activeClass：选中路由高亮显示

//===>src/components/Tabbar.vue

3.因为在上个小例子中，已经在src/router/index.js文件中，写好了路由的相关配置，所以可以找到对应路径的。
4.运行项目。运行项目时，项目在src/main.js中找到了route了，所以能跑起来组件中的router-link路由

image.png

二级路由以及重定向

二级路由

1.配置路由文件

//===>src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Film from '@/views/Film'
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'
import Nowplaying from '@/views/Film/Nowplaying'
import Comingsoon from '@/views/Film/Comingsoon'

Vue.use(VueRouter)

const routes = [
  {
    path: '/film',
    component: Film,
    children: [
      {
        path: 'nowplaying',
        component: Nowplaying
      }, {
        path: 'comingsoon',
        component: Comingsoon
      }
    ]
  },
  {
    path: '/cinema',
    component: Cinema
  },
  {
    path: '/center',
    component: Center
  }, {
    path: '*',
    component: Film
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2.创建Nowplaying和Comingsoon组件

//===>src/views/Film/Comingsoon.vue

//===>src/views/Film/Nowplaying.vue

3.配置路由要显示的地方

//===>src/views/Film.vue

二级路由

重定向

1.修改路由文件

//===>src/router/index.js
...
const routes = [
  {
    path: '/film',
    component: Film,
    children: [
      {
        path: 'nowplaying',
        component: Nowplaying
      }, {
        path: 'comingsoon',
        component: Comingsoon
      }, {
        path: '',
        redirect: '/film/nowplaying'
      }
    ]
  },
 ...
]
...

重定向