vue的router-view怎么使用

在Vue中，router-view组件是用来管理路由的核心组件之一。在项目中，通常会在App.vue文件中使用router-view进行路由管理。你可以在template标签中将router-view作为一个占位符，用来展示不同路由对应的组件内容。例如：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

这样，当路由切换时，对应的组件内容就会被渲染到router-view中。

在使用router-view的时候，还需要进行一些配置。首先，你需要在main.js文件中引入Vue、App组件和router配置文件。然后，将App组件和router配置文件作为参数传入new Vue时进行实例化，以便启用Vue Router。例如：

import Vue from 'vue';
import App from './App';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

接下来，你需要在router.js配置文件中对路由进行设置。在配置中，你可以指定每个路由对应的路径、名称和组件。还可以设置默认重定向路由和子路由。例如：

{
  path: "/routerViewPractice",
  name: "routerViewPractice",
  component: () => import("@/views/routerView/index.vue"),
  redirect: '/messagePage', // 页面默认加载的路由
  children: [
    {
      path: "/messagePage",
      name: "messagePage",
      component: () => import("@/views/routerView/childPages/messagePage.vue")
    },
    {
      path: "/contactPage",
      name: "contactPage",
      component: () => import("@/views/routerView/childPages/contactPage.vue")
    },
    {
      path: "/dynamicPage",
      name: "dynamicPage",
      component: () => import("@/views/routerView/childPages/dynamicPage.vue")
    }
  ]
}

最后，在父组件中，你可以通过在template标签中使用router-view来展示对应路由的组件内容。例如：

<template>
  <div>
    <title-bar :title="title"></title-bar>
    <router-view></router-view>
    <BottomBar @handleMsg='handleMsg' @lookContact='lookContact' @readDynamic='readDynamic'></BottomBar>
  </div>
</template>

通过这种方式，你可以将路由切换的内容展示在router-view中，并实现页面间的跳转。

希望这能帮助到你！<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>