vue一二级路由配置

项目中使用vue的时候一定会用到路由，并且二级路由甚至三级路由的需求都是刚需的，当然，多级路由配置方法和二级路由的是一样的，简单讲讲二级路由的配置。

第一步：安装路由生态

yarn add vue-router (也可以用npm)

第二步：配置一级路由

一、src静态文件夹下新建router文件夹并在其里面新建一个index.js文件，引入vue-router

// 1、引入vue-router和vue
import Router from 'vue-router'
import Vue from 'vue'
// 2、需要在vue中使用vue-router
Vue.use(Router)  //原理是内部调用了Router.install(Vue)
//3、暴露出去
export default router;

二、在main.js主入口文件引入router实例

// 在main.js主入口文件引入router实例
import router from './router'
// 实例化中用router(由于属性值和属性名相同简写为router)
new Vue({
  render: h => h(App),
  router // 就是为了让每一个组件都可以访问到路由相关的api($router/$route)(面试题)
}).$mount('#app')

三、配置视图组件

在src文件夹下新建views文件夹在其下面新建组件Flims.vue

<template>
  <div>
       <p>电影页面</p>
       <p>轮播图</p>
       <p>选项卡</p>
  </div>
</template>

四、配置一级路由

// 在index.js里面引入引入Films组件
import Films from "@/views/Films"
let routes = [
    {
        path:"/films",// 配置路径
        component:Films // 映射的组件
    }
]
// 实例化
let router = new Router({
  routes,
})
// 这样配置完，只会把路径跳过去，Films组件不会被渲染到页面上
// 所以在App.vue机构中加上
 <!--router-view就可以用来渲染对应的路由组件-->
    <router-view></router-view>
// 这样就完成了一级路由的配置

五、配置二级路由

views下新建文件夹films下新建两个Nowplaying.vue和ComingSoon.vue两个文件

// 在index.js下引入这两个组件
import Nowplaying from '@/views/films/Nowplaying'
import ComingSoon from '@/views/films/ComingSoon'
// 配置路由路径和映射组件（在films里面添加children数组里嵌套对象配置路径及映射组件）
let routes = [
    {
        path:"/films",
        component:Films,
        children:[// 需要配置二级路由了
          {
            path:'/films/nowplaying',
            component:Nowplaying
          },
          {
            path:'/films/comingsoon',
            component:ComingSoon

          }

        ]
    }
 ]
// 然后在films组件里面添加router-view
        <!--通过router-view标签规定Films的二级路由的视图位置--->
        <router-view></router-view>

六、路由切换

通过声明式导航的方式进行路由跳转：<router-link to='地址'></router-link>

注：必须和to一起使用，否则会报错

在src新建components/tabber/index.vue

在这里封装一个路由切换的组件

<template>
    <ul>
      <!-- <router-link to="/films" active-class="active" tag="li">电影</router-link>
      <router-link to="/cinema" active-class="active" tag="li">影院</router-link>
      <router-link to="/center" active-class="active" tag="li">中心</router-link> -->
// 利用router-link方法完成路由切换，并结合v-for方法进行渲染，tag标签给为li,添加key属性更快的加载，动态添加active-class属性
        <router-link
            v-for="nav in navList"
            :key="nav.id"
            :to="nav.path"
            active-class="active"
            tag="li"
        >{{nav.title}}</router-link>
    </ul>
</template>

<script>
export default {
  data () {
    return {// 数据
       navList:[
           {id:1,title:"电影",path:"/films"},
           {id:2,title:"影院",path:"/cinema"},
           {id:3,title:"个人中心",path:"/center"}
       ]
    }
  },
  methods: {
       
  }
}
</script>

<style lang="scss" scoped>
  .active{
    color:orange
  }
  ul{// 定位到下面并且上下居中，li均分
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
    height:50px;
    display:flex;
    li{
      flex:1;
      text-align: center;
      line-height: 50px;
    }
  }
</style>