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
};