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.js

// 新建一个组件
//路由规则配置:当你遇到什么样的路径的时候,你要去渲染什么样的组件
var template = `
  

    

        首页
        电影页
    

    
  
`;

// 导出一个组件配置对象
export default {
  template,
  methods: {
    back(){
      this.$router.back();
    }
  },
};

Home.js

export default {
  template:`
  
首页
`
}

Movie.js

import MovieDetail from "../components/MovieDetail.js"
import movieService from "../service/movieService.js";
var template = `
    

    回到列表页
        
电影详情页
        
    
    

`;
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 = `
  

    
    
{{movie.name}}：电影详情
    

      英文名：
      {{movie.ename}}
    
    

      票房：
      {{movie.count}}
    
    导演
    

      

        
        {{item.name}}
      
    
    
详情介绍:{{ movie.intro }}
  
`;

export default {
  template,
  props: ["movie"] //给我一个完整的电影对象
}

MovieItem.js

// 一条电影

var template = `

  

    
     
    
  
 
  

    
{{movie.name}}
 
    

      英文名：{{movie.ename}} 
      类型：{{movie.type}} 
      
 
      上映地区：{{movie.area}} 
      上映时间：{{movie.upDate}} 
      时长：{{movie.time}}
    
 
    

        {{movie.intro}}
    
  

`;

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