Vue路由器视图未显示所有视图答案

【问题标题】：Vue router-view isn't displaying all viewsVue路由器视图未显示所有视图
【发布时间】：2021-08-02 23:22:43
【问题描述】：

抱歉，文字太重了。我所有的路由器视图都工作，除了一个，它显示为空白。我没有看到任何控制台错误警告，并且视图之间的格式相同 - 唯一的区别是模板。这很有效，但我开始了一个新项目，因为我的 package.json 和依赖项变得混乱。我已经阅读了令人作呕的代码，但我无法弄清楚为什么它不会显示。代码很精简，因为有很多。如果您愿意，这里有一个沙盒链接：https://codesandbox.io/s/condescending-monad-5o8qw

    <template>
  <div class="review-movie-detail">
    <div class="movie-image">
    <img :src="(`https://image.tmdb.org/t/p/original/${movie.poster_path}`)" alt="Movie Poster" />
    </div>

    <table class="movie-rating-details">
    <tr> <h2>{{movie.original_title}}</h2> </tr>
    <p> </p>
    <tr>Gore rating: <span class="emojiRatings" >{{getGoreEmoji()}} </span></tr>
    <tr><input v-model = "goreRating" type="range" min="1" max="100" class="slider" id="myRange"></tr>

    <tr> <div class="star-rating"> <star-rating v-model="rating"> </star-rating></div></tr>
    <tr><b-button class="block-button">Submit review</b-button></tr>
    </table>
  </div>
</template>

<script>
import { ref, onBeforeMount } from 'vue';
import env from '@/env.js'
import { useRoute } from 'vue-router';
import StarRating from 'vue-star-rating'

    
    
    export default {
      components : {StarRating},
      setup () {
        const movie = ref({});
        const route = useRoute();
        onBeforeMount(() => {
          fetch(`https://api.themoviedb.org/3/movie/${route.params.id}?api_key=${env.apikey}`)
    
            .then(response => response.json())
            .then(data => {
              movie.value = data;
            });
        });
        return {
          movie
        }
      },
      data() {
         return {
           goreRating: '50',
           shockRating : '50',
           jumpRating: '50',
           plotRating: '50',
           supernaturalRating: '50',
           rating: '3.5'
          }
        
      },
      methods: {
    getGoreEmoji() {
    let emojiRating = ["????", "????????", "????????????", "????????????????", "????????????????????", "????????????????????????"]
    return emojiRating[(Math.floor(this.goreRating/20))]
},

}
}

这是我的路由器：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import MovieDetail from '../views/MovieDetail.vue'
import ReviewMovie from '../views/ReviewMovie.vue'



const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
  },
  {
    path: '/movie/:id/review',
    name: 'Review Movie',
    component: ReviewMovie
  }
]


const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

和 app.Vue 显示路由器视图...

<template>
<div>
<header>
  <GoBack />

  <router-link to="/">
  <h1><span>Horror</span>Hub</h1> 
  </router-link>
</header>
<main>
  <router-view></router-view>
</main>
</div>
</template>
<script>
import GoBack from "@/./components/GoBack"
export default {
  components: {
    GoBack
  }
  
}
</script>

我怎样才能找到这个问题的根本原因（双关语）？

【问题讨论】：

我还没有找到解决方案，但问题出在vue-star-rating，如果你把它注释掉，它就可以了。

标签： javascript vue.js routes vue-component vuejs3

【解决方案1】：

由于你使用的是 Vue 3，所以你需要使用vue-star-rating@next

npm install vue-star-rating@next
or
yarn add vue-star-rating@next

在package.json中，应该是

"vue-star-rating": "^2.1.0"

并使用新的新语法

<star-rating v-model:rating="rating"></star-rating>

这是工作代码和框：

https://codesandbox.io/s/little-sea-xccm4?file=/src/views/ReviewMovie.vue

【讨论】：