第十一篇 - Vue页面内嵌一个vue页面

一个页面的导航栏是可以重用的，所以重用部分单独提出来作为一个vue页面是很有必要的，那么一个vue页面内嵌一个vue页面怎么实现呢？

目前程序是可以跳转到jump1页面的，现在我们新建一个navigation.vue，将其内嵌于jump1页面看看。

第一步：新建navigation.vue

 navigation.vue

<script setup>
export default {
  data () {

  },
  methods: {

  }
}
</script>

<template>
  <div>navigation页面</div>
</template>

<style scoped>

</style>

 

第二步：在jump1test.vue中引入navigation.vue

/* eslint-disable */
<template>
  <div>
    <h1>我是一个jump1</h1>
    <navigation></navigation>
  </div>
</template>
<script>
import navigation from './navigation.vue'

export default {
  name: 'jump1test',
  components: {
    navigation

  }
}
</script>
<style scoped>

</style>

 

第三步：运行一下看结果

 

可以看到navigation页面内嵌成功。