vue.js - 在单个文件组件中使用路由器链接

Question

我被困在我的单文件组件中的路由器中，我试图在单文件组件中包含另一个组件，例如我已将thirdtemplate.vue 命名为我的SFC，并且我使用Vue.component（“newTemplate”，{template :"..."})，正如我在这篇文章中向下展示的示例。我需要在我的 newTemplate 组件中使用路由器链接，以便它调用组件 newTemplate 的模板。

<template>
  <div>
    <h4>hello this is from thirdTemplate</h4>
    <router-link to="/secondTemplate">Go to secondTemplate</router-link>
    <router-link to="/thirdTemplate">Go to thirdTemplate</router-link>
    <newtemplate></newtemplate>
  </div>
</template>
<script>
Vue.component("newtemplate", {
  template: "<template><div><button>hello</button></div></template>"
});

module.exports = {
  name: "thirdTemplate",
  methods: {},
  components: {}
};
</script>

标签： vue.jsvuejs2vue-componentvue-router

Answer 1

将此代码移动到定义新 Vue 构造函数的 main.js

Vue.component("newtemplate", {
  template: "<template><div><button>hello</button></div></template>"
});

并为您的路由器配置第一个模板和第二个模板