vue -router 跳转不刷新 页面不加载

Question

父页面

从父页面点击电影名称进入子页面，如果不刷新页面，从api上获取的数据无法渲染
但是进入子页面后，从检查中看见代码已经出来了，应该是已经通过api拿到数据

子页面

子页面检查

刷新后的子页面

<template>
    <div id="Home">
        <div id="search">
            <input type="text" id="search_box" placeholder="请输入搜索的内容" v-on:keypress.enter="search()" />
            <img src="../assets/搜索.png" v-on:click="search()" />
        </div>
        <div id="title">
            <h3 id="title_msg">{{msg}}</h3>
        </div>
        <img src="../assets/载入中.gif" id="loading" />
        <div id="box">
            <ul>
                <li v-for="value in Movie" class="outer">
                    <div class="image">
                        <img v-bind:src="value.images.small" v-bind:alt="value.title" class="image" />
                    </div>
                    <div>
                        <router-link :to="'/Movie/'+value.id">
                            <h4>{{value.title}}</h4>
                        </router-link>
                        <ul>
                            <li v-for="val in value.casts" class="cast">{{val.name}}</li>
                        </ul>
                        <ul class="actor">
                            <li v-for="val in value.genres" class="type">{{val}}</li>
                        </ul>
                        <p>{{value.year}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import Jquery from '@/assets/js/jquery-3.2.1.min.js'
    export default {
        name: 'Home',
        data() {
            return {
                Movie: [],
                msg: ''
            }
        },
        created: function() {
            let vm = this;
            $.ajax({
                type: "get",
                url: "https://api.douban.com/v2/movie/in_theaters",
                async: true,
                dataType: 'jsonp',
                success: function(data) {
                    vm.Movie = data.subjects;
                    let height = Math.ceil(vm.Movie.length / 4) * 480;
                    $('#box').css('height', height + 'px');
                    vm.msg = '正在热映'
                }
            });
            $(document).ajaxStart(function() {
                $('#loading').show();
                $('#box').hide();
            });
            $(document).ajaxStop(function() {
                $('#loading').hide();
                $('#box').show();
            });
        },
        methods: {
            search() {
                let vm = this;
                let value = document.getElementById('search_box').value;
                if(value == '') {
                    alert('请输入搜索内容！')
                } else {
                    $.ajax({
                        type: "get",
                        url: "http://api.douban.com/v2/movie/search?q=" + value,
                        async: true,
                        dataType: 'jsonp',
                        success: function(data) {
                            vm.Movie = data.subjects;
                            let height = Math.ceil(vm.Movie.length / 4) * 480;
                            $('#box').css('height', height + 'px');
                            vm.msg = '搜索内容'
                        }
                    });
                    $(document).ajaxStart(function() {
                        $('#loading').show();
                        $('#box').hide();
                    });
                    $(document).ajaxStop(function() {
                        $('#loading').hide();
                        $('#box').show();
                    })
                }
            }
        }
    }
</script>

<style lang="less">
    @import url("../assets/css/list.less");
    @import url("../assets/css/search_box.less");
</style>

父页面代码

<template>
    <div id="Movie">
        <div id="box">
            <div id="title">
                <span class="large">{{Movie.title}}</span>
                <span class="middle">{{Movie.original_title}}</span>
                <span class="middle" style="font-weight: bolder; font-size: 24px;">({{Movie.year}})</span>
            </div>
            <div class="image">
                <img v-bind:src="Movie.images.large" v-bind:alt="Movie.title" />
            </div>
            <ul class="directors">
                <li class="tag">导演：</li>
                <li v-for="value in Movie.directors">{{value.name}}</li>
            </ul>
            <ul class="autor">
                <li class="tag">主演：</li>
                <li v-for="value in Movie.casts">{{value.name}}</li>
            </ul>
            <ul class="type">
                <li class="tag">类型：</li>
                <li v-for="value in Movie.genres">{{value}}</li>
            </ul>
            <p class="rating">豆瓣评分:<meter min="0" max="10" v-bind:value="Movie.rating.average"></meter>{{Movie.rating.average}}</p>
            <ul class="wanna">
                <li class="left">想看({{Movie.wish_count}})</li>
                <li class="right">看过({{Movie.reviews_count}})</li>
            </ul>
            <h3>{{Movie.title}}的剧情介绍</h3>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{Movie.summary}}</p>
        </div>
    </div>
</template>

<script>
    import Jquery from '@/assets/js/jquery-3.2.1.min.js'
    export default {
        name: 'Movie',
        data() {
            return {
                Movie: {},
                id: ''
            }
        },
        created: function() {
            let vm = this;
            $.ajax({
                type: "get",
                url: "http://api.douban.com/v2/movie/subject/" + this.$route.params.id,
                async: true,
                dataType: 'jsonp',
                success: function(data) {
                    vm.Movie = data;
                }
            });
        }
    }
</script>

<style lang="less">
    @import url("../assets/css/movie.less");
</style>

子页面代码

Answer 1

你的<router-view />呢？

Answer 2

问题已解决，原来在不同的vue文件之中不能明明一样的id，因为父页面跟子页面命名了同一个id