vue-admin-template 跳转子页面

在Vue Admin Template中，要实现跳转到子页面，你可以使用Vue Router来管理路由。以下是一些步骤：

1. 首先，确保你已经安装了Vue Router。可以使用以下命令来安装：

npm install vue-router

2. 在你的项目中创建一个router文件夹，并在其中创建一个router.js文件。

3. 在router.js文件中，导入Vue和Vue Router，并使用Vue.use()方法注册Vue Router插件。然后创建一个新的Router实例，并定义你的路由配置。

例如，你可以在router.js文件中编写如下代码：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home.vue'),
      meta: { title: 'Home' }
    },
    {
      path: '/about',
      component: () => import('@/views/About.vue'),
      meta: { title: 'About' }
    },
    // 其他子页面的路由配置
  ]
});

export default router;

在上面的代码中，我们定义了两个路由：'/'对应Home.vue组件，'/about'对应About.vue组件。你可以根据自己的需要添加更多的子页面路由。

4. 在你的入口文件（通常是main.js），导入router.js文件，并将router实例添加到Vue实例中。

例如，在main.js文件中添加以下代码：

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

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

5. 在你的组件中，可以使用`<router-link>`组件来创建导航链接，或者使用编程式导航来实现页面跳转。

例如，要在导航栏中创建一个指向About页面的链接，可以在你的组件模板中添加如下代码：

<router-link to="/about">About</router-link>

或者，在组件的方法中使用编程式导航来跳转到About页面：

this.$router.push('/about');

这样，当用户点击导航链接或执行编程式导航时，就会跳转到子页面。

请注意，在Vue Admin Template中，你可能还需要进行一些额外的配置，如权限管理等。具体的配置取决于你使用的模板和需求。你可以参考Vue Router的官方文档来了解更多关于路由配置和导航的详细信息。