Question

我在vue中遇到一个奇怪的问题。我已经设置了一个组件来查看项目的详细信息，该组件接受道具并在首次加载时进行渲染，但是当我重新加载页面时，整个组件（包括根）都消失了。

我试图命名路由器视图，但这不起作用。

MainApp.vue

<template>
    <div class="container">
        <div>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>

<script>

    export default{

    }
</script>

Routes.js

import ViewProduct from './store/View.vue'

const routes = [
    {
      name: 'viewProduct',
      path: 'product/:id/view/:slug',
      component: ViewProduct,
      props: true
    }
];

export default routes;

Main.js

import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';

const router = new VueRouter({ mode: 'history', routes});
import MainApp from './MainApp'
import store from './store/store/index'

new Vue({
  el: '#storeapp',
  render: h => h(MainApp),
  router,
  store: store,
});

我还有另一个可以正常工作的路由器视图容器，但是这个容器不行。

Vue.js组件在页面加载时消失

0 个答案: