vue引入其它vue页面

在Vue.js中，如果你想要在一个页面引入并显示另一个Vue组件，你可以通过以下几种方式：

1. **嵌套式组件**：如果需要在同一文件内使用另一个组件，你可以直接在当前组件的模板部分 `<template>` 中使用 `<component>` 标签，例如：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent }
};
</script>

这里的`ChildComponent.vue`是你需要引入的另一个Vue组件。

2. **动态组件**：如果你想在运行时决定加载哪个组件，可以使用 `v-bind:is` 或者 `component` 绑定动态组件：

<template>
  <button @click="currentComponent = 'ChildComponent'">切换组件</button>
  <component :is="currentComponent"></component>
</template>
<script>
export default {
  data() {
    return {
      currentComponent: 'DefaultComponent'
    };
  },
  components: {
    DefaultComponent: {...},
    ChildComponent: {...}
  }
};
</script>

3. **路由跳转**：如果两个Vue页面需要独立展示，通常会通过Vuex Router（Vue官方推荐的路由管理库）来进行页面间的导航。创建一个路由规则，在`router/index.js`中设置路径和对应的组件：

import ChildComponent from '@/components/ChildComponent.vue';

const routes = [
  // ...
  {
    path: '/child',
    component: ChildComponent,
  },
];

然后在需要的地方使用`this.$router.push('/child')`进行跳转。