如何在主组件（app.vue）之外加载特定的“路由”（vue-router）？

Question

我需要在 app.vue 之外加载一个路由，我有一个可以正常工作的仪表板然后我决定实现一个登录，这意味着更改 app.vue，所以在更改它之后我遇到了我的仪表板在里面加载的问题app.vue 因此采用 app.vue 的样式并完全变形，所以现在我需要在 app.vue 之外加载，以便它可以像以前一样正常工作。

这些是我的路线：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history', // to disappear the # in URL's
  base: process.env.BASE_URL,
  routes: [
    //HOME
    {
      name: 'Home',
      path: '/',
      component: () => import('@/components/Home.vue'),
    },
    //LOGIN
    {
         name: 'Login',
         path: '/login',
         //component: () => import('@/views/login/Login'),
         component: () => import('@/components/Login.vue'),
    },
    //REGISTER
    {
        name: 'Register',
        path: '/register',
        component: () => import('@/components/Register.vue'),
    },
    //DASHBOARD
    {
      //name: 'Dashboard',
      path: '/dash',
      name: 'dashboardd',
      component: () => import('@/views/dashboard/Index'),
      children: [
        //CLIENTS
        {
          name: 'Clients',
          path: '/Clients',
          component:()=> import('@/views/clientss/Clientss')
        },
        //SALES
        {
          name: 'Sales',
          path: '/sales',
          component:()=> import('@/views/sales/Sales')
        },
        //NUEVA VENTA
        {
          name: 'Sales',
          path: '/new-sale',
          component:()=> import('@/views/sales/NewSale')
        },
        //productos
        {
          name: 'Productos',
          path: '/products',
          component:()=> import('@/views/articulos/Products')
        },
        //listar articulos
        {
          name: 'ListarArticulos',
          path: '/articulos',
          component:()=> import('@/views/articulos/ListarArticulos')
        },
        //crear articulo
        {
          name: 'CrearArticulo',
          path: '/articulos/crear',
          component:()=> import('@/views/articulos/CrearArticulo')
        },
         //editar articulo
         {
          name: 'EditarArticulo',
          path: '/articulos/editar/:id',
          component:()=> import('@/views/articulos/EditarArticulo')
        },
        // Dashboard
        {
          name: 'Dashboard',
          path: '/dash',
          component: () => import('@/views/dashboard/Dashboard'),
        },
        {
          name: 'PROVEEDORES',
          path: '/providers',
          component: () => import('@/views/providers/Provider'),
        },
        {
          name: 'USUARIOS',
          path: '/users',
          component: () => import('@/views/users/User'),
        },
        {
          name: 'REPORTES',
          path: '/reports',
          component: () => import('@/views/reports/Report'),
        },
        // Pages
        {
          name: 'User Profile',
          path: 'pages/user',
          component: () => import('@/views/dashboard/pages/UserProfile'),
        },
        {
          name: 'Notifications',
          path: 'components/notifications',
          component: () => import('@/views/dashboard/component/Notifications'),
        },
        {
          name: 'Icons',
          path: 'components/icons',
          component: () => import('@/views/dashboard/component/Icons'),
        },

        // Maps
        {
          name: 'Google Maps',
          path: 'maps/google-maps',
          component: () => import('@/views/dashboard/maps/GoogleMaps'),
        },
      ],
    },
  ],
})

我需要在 App.vue 之外加载名为“Dashboard”的路由。因为我的仪表板有自己的风格，并且当它是唯一运行的应用程序时可以正常工作：

Answer 1

您可以使用this.$router 简单地从属于您的 Vue 的所有组件访问路由器。 在 Vue 2 中，您需要调用 this.$router.push({name:'Dashboard'}) 以立即导航到名为“Dashboard”的路线。