vue.js - 如何在 Vue.Js 中使用子路径

Question

这段代码

 index.js

{
  path: '/test',
  name: 'test',
  component: Test,
  children: [{
    path: 'p1',
    name: 'p1',
    component: P1
  }]
}

在组件测试中

test.vue

<template>
<div>
    <h1>Test</h1>
    <button v-on:click="navigateTo('/test/p1')">p1</button>
</div>
</template>
<script>
   export default {
      methods: {
         navigateTo(route) {
          this.$router.push(route)
         }
       }
      }
 </script>

在组件 P1 中

<template>
<div>
    <h1>P1</h1>
</div>
</template>

当我单击按钮 p1 时，我在浏览器中有路径，但没有加载组件 p1。为什么？？ 我是 vue.js 的新手

标签： vue.jsvuejs2vue-component

Answer 1

我认为您错过了<router-view></router-view>父模板中的 （in test.vue）。路由器视图是渲染子组件的地方。IE

<template>
<div>
    <h1>Test</h1>
    <button v-on:click="navigateTo('/test/p1')">p1</button>
    <router-view></router-view>
</div>
</template>