title: vue-router (vue 3) createWebHistory No match found for location with path
body: <p>I have a laravel 8 project and upgraded laravel-mix to v6 to support vue 3.</p>
  <p>The problem is the createWebHistory from vue-router 4</p>
  <p>package.json</p>
  <pre><code>{
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
          &quot;development&quot;: &quot;mix&quot;,
          &quot;watch&quot;: &quot;mix watch&quot;,
          &quot;watch-poll&quot;: &quot;mix watch -- --watch-options-poll=1000&quot;,
          &quot;hot&quot;: &quot;mix watch --hot&quot;,
          &quot;production&quot;: &quot;mix --production&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;@vue/compiler-sfc&quot;: &quot;^3.0.3&quot;,
          &quot;axios&quot;: &quot;^0.19&quot;,
          &quot;cross-env&quot;: &quot;^7.0&quot;,
          &quot;laravel-mix&quot;: &quot;^6.0.0-beta.14&quot;,
          &quot;lodash&quot;: &quot;^4.17.19&quot;,
          &quot;postcss&quot;: &quot;^8.1.10&quot;,
          &quot;resolve-url-loader&quot;: &quot;^3.1.0&quot;,
          &quot;sass&quot;: &quot;^1.29.0&quot;,
          &quot;sass-loader&quot;: &quot;^8.0.2&quot;,
          &quot;vue-loader&quot;: &quot;^16.1.0&quot;,
          &quot;vue-template-compiler&quot;: &quot;^2.6.12&quot;
      },
      &quot;dependencies&quot;: {
          &quot;mitt&quot;: &quot;^2.1.0&quot;,
          &quot;vue&quot;: &quot;^3.0.3&quot;,
          &quot;vue-cookie-next&quot;: &quot;^1.0.3&quot;,
          &quot;vue-router&quot;: &quot;^4.0.0-rc.6&quot;,
          &quot;vue-sweetalert2&quot;: &quot;^4.1.1&quot;
      }
  }
  </code></pre>
  <p>webpack.mix.js</p>
  <pre><code>const mix = require('laravel-mix');
  mix.js('resources/vue-admin/js/app.js', 'public/admin-store/js')
      .sass('resources/vue-admin/sass/app.scss', 'public/admin-store/css')
      .options({ processCssUrls: false })
      // .sourceMaps()
      .vue({ version: 3 });
  </code></pre>
  <p>the routes.js</p>
  <pre><code>import { createRouter, createWebHistory } from 'vue-router';
  
  import Login from &quot;./auth/Login&quot;;
  import Logout from &quot;./auth/Logout&quot;
  import AuthLayout from &quot;./layout/AuthLayout&quot;;
  import DashboardLayout from &quot;./layout/DashboardLayout&quot;;
  import Dashboard from &quot;./views/Dashboard&quot;;
  
  
  let routes = [
      {
          path: '/',
          redirect: 'dashboard',
          component: DashboardLayout,
          children: [
              {
                  path: '/',
                  component: Dashboard,
                  name: 'dashboard',
                  meta: {
                      requiresAuth: true
                  }
              },            
              {
                  path: '/logout',
                  component: Logout,
                  name: 'logout',
                  meta: {
                      requiresAuth: true
                  }
              }
          ]
      },
      {
          path: '/',
          redirect: 'login',
          component: AuthLayout,
          children: [
              {
                  path: '/login',
                  component: Login,
                  name: 'login',
                  meta: {
                      requiresVisitor: true
                  }
              },
          ]
      }
  ];
  
  const router = createRouter({
      history: createWebHistory(),
      base: 'configure-admin',
      routes: routes,
      linkActiveClass: 'active'
  });
  
  router.beforeEach((to, from) =&gt; {
      if (to.meta.requiresAuth &amp;&amp; !isLoggedIn) {
          return {
              name: 'login',
          }
      }
  })
  
  export default router;
  </code></pre>
  <p>and in web.php (laravel routes):</p>
  <pre><code>Route::prefix('configure-admin')-&gt;group(function() {
  
      Route::get('/', function(){
          return view('admin.home');
      });
  
      Route::get('/{any}', function(){
          return view('admin.home');
      })-&gt;where('any', '.*')-&gt;name('admin');
  
  });
  </code></pre>
  <p>If I use in the routes.js</p>
  <pre><code>createWebHashHistory()
  </code></pre>
  <p>the login form is diplayed, but I dont want to use hash history.</p>
  <p>If using</p>
  <pre><code>createWebHistory()
  </code></pre>
  <p>then in console I get a warning:</p>
  <pre><code>[Vue Router warn]: No match found for location with path &quot;/configure-admin&quot;
  </code></pre>
  <p>and the page is blank.</p>
  <p>Could be a bug or I did missed something....</p>