组件模板没有显示，它呈现给`<！---->`

Question

我有一个forget-pwd.vue组件：

<template>

  <div class="page-common">
    ABC
  </div>

</template>

<script>


</script>

<style scoped>    

</style>

在router.js中

，有我的路线：

export const paths = {
  home: '/',
  dataCenter: '/data-center',
  forgetPassword: '/forget-password',

}


export const app_routes = [
  ......
  {
    path: paths.forgetPassword,
    name: '忘记密码',
    meta: {
      title: ''
    },
    component: (resolve) => require(['./views/忘记密码/forget-pwd.vue'], resolve)
  },

];

export const routes = [
  ...app_routes,
];

这是我的index.vue：

<template>
  <div class="index">
    <i-header ></i-header>
    <router-view></router-view>
    <i-footer></i-footer>
  </div>
</template>

<script>

  import Home from './首页/home.vue'
  import Header from '../components/header/header.vue'
  import Footer from '../components/footer/footer.vue'


  export default {
    data() {
      return {

      }
    },
    methods: {



    },

    components: {
      'home': Home,
      'i-header': Header,
      'i-footer': Footer,

    }
  };
</script>

<style scoped>

  .index {

  }

</style>

在我的header.vue模式中，我链接到forget-pwd.vue：

<router-link class="forget-pwd" type="text" to="forgetPwdPath" @click.native="closeModal" >忘记密码?</router-link>

跳过路线，但forget-pwd.vue模板未显示：

Answer 1

您忘记绑定路由器链接中的to。所以绑定它：

<router-link class="forget-pwd" type="text" :to="forgetPwdPath" @click.native="closeModal" >忘记密码?</router-link>

或者

<router-link class="forget-pwd" type="text" v-bind:to="forgetPwdPath" @click.native="closeModal" >忘记密码?</router-link>