VUE导航

声明式导航

<template>
  <nav>
    <ul>
     <router-link to="/film" tag="li" active-class="kerwinactive">
        <i class="iconfont icon-training"></i>
        <span>电影</span>
     </router-link>
     <router-link to="/cinema" tag="li" active-class="kerwinactive">
        <i class="iconfont icon-all"></i>
        <span>影院</span>
     </router-link>
     <router-link to="/center" tag="li" active-class="kerwinactive">
        <i class="iconfont icon-account"></i>
        <span>我的</span>
     </router-link>
    </ul>
  </nav>
</template>

<style lang="scss" scoped>
  nav{
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
    height: 50px;
    line-height: 25px;
    text-align: center;
    background: white;
    ul{
      display: flex;
      li{
        flex:1;
        display: flex;
        flex-direction: column;
        i{
          font-size: 20px;
        }
        span{
          font-size: 12px;
        }
      }
    }
  }

  .kerwinactive{
     color:red;
  }
</style>

编程式导航

跳转前页面

<template>
  <div>
    nowplaying
    <ul>
      <li v-for="data in datalist" :key="data.id" @click="handleClick(data.id)">
        {{data.title}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      datalist: [{
        id: 111,
        title: '夺冠'
      }, {
        id: 222,
        title: '姜子牙'
      }, {
        id: 333,
        title: '花木兰'
      }]
    }
  },
  methods: {
    handleClick (id) {
      // console.log(id)
      // location.href = '#/center'

      // 1- 路径
      this.$router.push(`/detail/${id}`) // 编程式导航

      // 2-路由名字
      // this.$router.push({
      //   name: 'kerwinDetail',
      //   params: {
      //     myid: id
      //   }
      // })

      // 3- query方式跳转详情

      // this.$router.push(`/detail?id=${id}`)
    }
  }
}
</script>

目标页面

<template>
  <div>
    detail
  </div>
</template>
<script>
export default {
  mounted () {
    // this.$route 当前匹配的路由对象信息
    console.log('利用获取的id ，ajax请求后端接口', this.$route.params.myid)

    // console.log('利用获取的id ，ajax请求后端接口', this.$route.query.id)
  }
}
</script>