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
<template>
    <div>
        Center
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="sass" scoped>

</style>

//===>src/views/Cinema.vue
<template>
    <div>
        Cinema
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="sass" scoped>

</style>

//===>src/views/Film.vue
<template>
    <div>
        Film
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="sass" scoped>

</style>

3.路由展示位置

//===>src/App.vue
<template>
  <div>
    hello vue
    <!-- 路由容器 -->
    <router-view></router-view>
   ...
  </div>
</template>

运行一下试试

路由声明式导航

1.src/App.vue

<template>
  <div>
    <tabbar />
    <!-- 路由容器 -->
    <router-view></router-view>
    <!-- <input type="text" ref="mytext" />
    <button @click="handleAdd()">add</button>

    <ul>
      <li v-for="data in datalist" :key="data">{{data}}</li>
    </ul>

    <navbar>
      <button @click="isShow=!isShow">navbar-click</button>
    </navbar>
    <sidebar v-show="isShow"></sidebar>-->
  </div>
</template>

<script>
import navbar from "./components/Navbar";
import sidebar from "./components/Sidebar";
import axios from "axios";
import tabbar from "@/components/Tabbar";
export default {
  data() {
   ...
  },
  methods: {
    ...
  },
  mounted() {
    ...
  },
  components: {
    navbar: navbar,
    sidebar: sidebar,
    tabbar
  }
};
</script>

<style lang='scss' scoped>
...
</style>

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

//===>src/components/Tabbar.vue
<template>
  <nav>
    <ul>
      <router-link to="/film" tag="li" activeClass="myactive">film</router-link>
      <router-link to="/cinema" tag="li" activeClass="myactive">cinema</router-link>
      <router-link to="/center" tag="li" activeClass="myactive">center</router-link>
    </ul>
  </nav>
</template>

<style lang="scss" scoped>
.myactive {
  color: red;
}
</style>

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
<template>
    <div>
        comingsoon
    </div>
</template>

//===>src/views/Film/Nowplaying.vue
<template>
    <div>
        nowplaying
    </div>
</template>

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

//===>src/views/Film.vue
<template>
    <div>
        <div>轮播</div>
        <div>film-header</div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="sass" scoped>

</style>

二级路由

重定向

1.修改路由文件

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

重定向