vue路由小demo練習

路由知識詳解地址
接着前面的demo地址繼續練習路由知識.
主要完成首頁和電影無刷新跳轉切換以及動態路由.實際就是組件之間的切換
先上效果圖
首頁:(簡單表示一下)

電影頁:

假設有一個電影詳情頁，詳情頁需要根據電影的id來獲取電影對象，然後渲染組件
那麼電影詳情頁的地址中就需要包含電影的id

這裏就涉及到三個問題：
如何把動態地址（地址某一部分會變化）匹配到組件
如何在組件中獲取到動態部分的內容
路由跳轉時，如何優雅的告知動態內容
解決方案見地址

項目目錄:

在前面基礎上增加了以下幾個組件:
Home.js 主頁組件
Movie.js 電影頁組件
router.js 路由規則配置組件
MovieDetail.js 電影詳情頁組件

index.js

// 入口模塊

// 負責新創建一個vue實例
import App from "./App.js";
import router from "./router.js"
new Vue({
  components: {
    App
  },
  router,   //將路由的功能嵌入到了vue實例中
  el: "#app",
  template: `<App/>`
});

App.js

// 新建一個組件
//路由規則配置:當你遇到什麼樣的路徑的時候,你要去渲染什麼樣的組件
var template = `
  <div>
    <header>
        <router-link :to = "{ name:'home' }">首頁</router-link>
        <router-link :to = "{ name:'movie-list' }">電影頁</router-link>
    </header>

    <router-view />
  </div>
`;

// 導出一個組件配置對象
export default {
  template,
  methods: {
    back(){
      this.$router.back();
    }
  },
};

Home.js

export default {
  template:`
  <h1>首頁</h1>`
}

Movie.js

import MovieDetail from "../components/MovieDetail.js"
import movieService from "../service/movieService.js";
var template = `
    <div class = "data-container">
    <button @click = "$router.back()">回到列表頁</button>
        <h1>電影詳情頁</h1>
        <MovieDetail :movie = "movie"/>
    </div>    

`;
export default {
  template,
  components:{
    MovieDetail
  },
  data(){
    return{
      movie:null
    }
  },
  async created() {
    var movieId =this.$route.params.id;  //得到電影的id
    var resp = await movieService.getMovie(movieId);  //獲取電影對象
    console.log(resp.data);
    this.movie = resp.data;
  },
}

router.js

import Home from "./pages/Home.js"
import MovieList from "./pages/MovieList.js"
import Movie from "./pages/Movie.js"
export default new VueRouter({
      routes: [
        //配置多條路由規則
        {
          //規則1
          name: "home",   //規則名稱
          path: "/",  //當匹配到路徑  / 時
          component: Home  //在router-view位置渲染Home組件
        },
        {
          //規則2
          name: "movie-list",  //規則名稱
          path: "/movie",  //當匹配到路徑 /movie時
          component: MovieList  //在router-view位置渲染Movie組件
        },
        {
          name: "movie-detail",
          path:"/movie/:id",
          component:Movie

        }
      ]
})

MovieDetail.js

var template = `
  <div v-if="movie" class="data-container">
    
    <h1>{{movie.name}}：電影詳情</h1>
    <p>
      <strong>英文名：</strong>
      <span>{{movie.ename}}</span>
    </p>
    <p>
      <strong>票房：</strong>
      <span>{{movie.count}}</span>
    </p>
    <strong>導演</strong>
    <ul>
      <li v-for="item in movie.director" :key="item._id">
        <img :src="item.image" alt=""/>
        <strong>{{item.name}}</strong>
      </li>
    </ul>
    <p><strong>詳情介紹:</strong>{{ movie.intro }}</p>
  </div>
`;

export default {
  template,
  props: ["movie"] //給我一個完整的電影對象
}

MovieItem.js

// 一條電影

var template = `
<div class="data">
  <div class="poster">
    <router-link :to="{name:'movie-detail', params:{id:movie._id}}">
    <img :src="movie.poster" alt=""> 
    </router-link>
  </div> 
  <div class="words">
    <router-link :to="{name:'movie-detail', params:{id:movie._id}}"><h2 class="title">{{movie.name}}</h2> </router-link>
    <div class="attach">
      <span>英文名：{{movie.ename}}</span> 
      <span>類型：{{movie.type}}</span> 
      <br> 
      <span>上映地區：{{movie.area}}</span> 
      <span>上映時間：{{movie.upDate}}</span> 
      <span>時長：{{movie.time}}</span>
    </div> 
    <div class="desc">
        {{movie.intro}}
    </div>
  </div>
</div>
`;

export default {
  props: ["movie"],
  template
};