编程式导航

编程式导航

<template>
  <div class="page-film">
    <h1>电影详情页面</h1>

    <p>姓名：{{ filmInfo.name }}</p>
    <p>评分：{{ filmInfo.grade }}</p>
    <!-- <p>导演：{{ filmInfo.actors ? filmInfo.actors[0].name : '' }}</p> -->
    <p>导演：{{ filmInfo.actors && filmInfo.actors[0].name }}</p>

    <!-- 写死一个猜你喜欢 两只老虎 -->
    <!-- <router-link to="/film/4924">两只老虎</router-link> -->

    <!-- router-link 的 to 属性也能像 this.$router.push()或replace() 那样传递对象 -->
    <router-link :to="{ name: 'detail', params: {filmId: 4924} }">两只老虎</router-link>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data () {
    return {
      filmInfo: {}
    }
  },

  watch: {
    $route (newVal) {
      console.log('路由变了')

      this.getFilmInfo()
    }
  },

  methods: {
    getFilmInfo () {
      // 1. 获取当前影片的Id
      let id = this.$route.params.filmId

      // 2. 发送ajax请求
      $.ajax({
        url: `https://m.maizuo.com/gateway?filmId=${id}&k=5610264`,
        method: 'GET',
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1575095471541165882348","bc":"440300"}',
          'X-Host': 'mall.film-ticket.film.info'
        },
        success: (result) => {
          if (result.status === 0) {
            this.filmInfo = result.data.film
          }
        }
      })
    }
  },

  created () {
    console.log('created')

    this.getFilmInfo()
  }
}
</script>

<style></style>

路由别名

给路由取个名字就能不用书写那么长吃url了直接写别名也可以跳转

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from './views/Home.vue'
import Films from './views/Films.vue'
import Film from './views/Film.vue'
import Cinemas from './views/Cinemas.vue'
import Center from './views/Center.vue'
// import Page404 from './views/404.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: 'films/nowPlaying',
          component: Films
        },
        {
          path: 'cinemas',
          component: Cinemas
        },
        {
          path: 'center',
          component: Center
        },
        {
          path: '',
          redirect: '/films/nowPlaying'
        }
      ]
    },
    {
      path: '/film/:filmId',
      name: 'detail',
      component: Film
    },
    {
      path: '*',
      // component: Page404 // 404
      redirect: '/films/nowPlaying'
    }
  ]
})

export default router