title: Vuejs route redirect on refresh
body: <p>When i use refresh button in my browser or hit <code>f5</code> on keyboard instead of refreshing my page it redirects to home page.</p>
  
  <h1>Code</h1>
  
  <p><code>router.js</code></p>
  
  <pre><code>import Vue from "vue";
  import VueRouter from 'vue-router';
  import store from './store';
  Vue.use(VueRouter);
  
  import NotFoundComponent from './components/NotFoundComponent.vue';
  
  const router = new VueRouter({
      mode: "history",
      routes: [
          {
              path: '*',
              name: 'notFound',
              component: NotFoundComponent,
              meta: {
                  breadCrumb: 'Not Found'
              }
          },
          //rest of routes...
      ]
  });
  
  
  router.beforeEach((to, from, next) =&gt; {
      if (to.matched.some(record =&gt; record.meta.requiresAuth)) {
          if (!store.getters.isLoggedIn) {
              next({
                  name: 'login'
              })
          } else {
              next()
          }
      }
      if (to.matched.some(record =&gt; record.meta.admin)) {
          if (store.getters.loggedUser.type !== 'admin') {
              next({
                  name: 'home'
              })
          } else {
              next()
          }
      }
      next()
  });
  
  router.afterEach((to, from) =&gt; {
      Vue.nextTick(() =&gt; {
          document.title = to.pageTitle || 'Test App';
      });
  });
  
  export default router;
  </code></pre>
  
  <p>For instance if i am in this URL</p>
  
  <pre><code>https://example.com/products
  </code></pre>
  
  <p>after refresh i will redirect to </p>
  
  <pre><code>https://example.com
  </code></pre>
  
  <p><strong>Any idea?</strong></p>
  
  <h1>Update</h1>
  
  <p><code>route.js</code> full code</p>
  
  <pre><code>import Vue from "vue";
  import VueRouter from 'vue-router';
  import store from './store';
  Vue.use(VueRouter);
  
  //admins
  import pageHome from './components/HomePage.vue';
  import Dashboard from './components/admin/Dashboard.vue';
  import AdminProducts from './components/admin/Products/Products.vue';
  import AddProducts from './components/admin/Products/Add.vue';
  import CurrencySettings from './components/admin/Settings/Currencies/Currency.vue';
  import AddCurrencies from './components/admin/Settings/Currencies/Add.vue';
  import editCurrencies from './components/admin/Settings/Currencies/Edit.vue';
  import SlideSettings from './components/admin/Settings/Slides/Slide.vue';
  import addSlides from './components/admin/Settings/Slides/Add.vue';
  import editSlides from './components/admin/Settings/Slides/Edit.vue';
  
  import categoriesSettings from './components/admin/Categories/Categories.vue';
  import addCategories from './components/admin/Categories/Add.vue';
  import editCategories from './components/admin/Categories/Edit.vue';
  
  import tagsSettings from './components/admin/Tags/Tags.vue';
  import addTags from './components/admin/Tags/Add.vue';
  import editTags from './components/admin/Tags/Edit.vue';
  
  
  import brandsSettings from './components/admin/Brands/Brands.vue';
  import addBrands from './components/admin/Brands/Add.vue';
  import editBrands from './components/admin/Brands/Edit.vue';
  
  
  import usersSettings from './components/admin/Users/Users.vue';
  import addUsers from './components/admin/Users/Add.vue';
  import editUsers from './components/admin/Users/Edit.vue';
  
  
  import reviewsSettings from './components/admin/Reviews/Reviews.vue';
  import editReviews from './components/admin/Reviews/Edit.vue';
  
  // users
  import Register from './components/auth/Register.vue';
  import Login from './components/auth/Login.vue';
  import Profile from './components/auth/Profile.vue';
  import SingleProduct from './components/Front/SingleProduct.vue';
  
  import NotFoundComponent from './components/NotFoundComponent.vue';
  
  const router = new VueRouter({
      mode: "history",
      routes: [
          {
              path: '*',
              name: 'notFound',
              component: NotFoundComponent,
              meta: {
                  breadCrumb: 'Not Found'
              }
          },
          // ADMIN ROUTES
          {
              path: '/dashboard',
              name: 'dashboard',
              component: Dashboard,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  name: 'dashboard',
                  breadCrumb: 'Dashboard'
              }
          },
          {
              path: '/dashboard/products',
              name: 'adminProducts',
              component: AdminProducts,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Products'
              }
          },
          {
              path: '/dashboard/products/add',
              name: 'addProducts',
              component: AddProducts,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Add Product'
              }
          },
          {
              path: '/dashboard/currencies',
              name: 'CurrencySettings',
              component: CurrencySettings,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Currencies'
              }
          },
          {
              path: '/dashboard/currencies/add',
              name: 'addCurrencies',
              component: AddCurrencies,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Add Currency'
              }
          },
          {
              path: '/dashboard/currencies/:id/edit',
              name: 'editCurrencies',
              component: editCurrencies,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Edit Currency'
              }
          },
          {
              path: '/dashboard/slides',
              name: 'SlideSettings',
              component: SlideSettings,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Slides'
              }
          },
          {
              path: '/dashboard/slides/add',
              name: 'addSlides',
              component: addSlides,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Add Slide'
              }
          },
          {
              path: '/dashboard/slides/:id/edit',
              name: 'editSlides',
              component: editSlides,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Edit Slider'
              }
          },
          {
              path: '/dashboard/categories',
              name: 'categoriesSettings',
              component: categoriesSettings,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Categories'
              }
          },
          {
              path: '/dashboard/categories/add',
              name: 'addCategories',
              component: addCategories,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Add Category'
              }
          },
          {
              path: '/dashboard/categories/:id/edit',
              name: 'editCategories',
              component: editCategories,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Edit Category'
              }
          },
          {
              path: '/dashboard/tags',
              name: 'tagsSettings',
              component: tagsSettings,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Tags'
              }
          },
          {
              path: '/dashboard/tags/add',
              name: 'addTags',
              component: addTags,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Add Tag'
              }
          },
          {
              path: '/dashboard/tags/:id/edit',
              name: 'editTags',
              component: editTags,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Edit Tag'
              }
          },
          {
              path: '/dashboard/brands',
              name: 'brandsSettings',
              component: brandsSettings,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Brands'
              }
          },
          {
              path: '/dashboard/brands/add',
              name: 'addBrands',
              component: addBrands,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Add Brand'
              }
          },
          {
              path: '/dashboard/brands/:id/edit',
              name: 'editBrands',
              component: editBrands,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Edit Brand'
              }
          },
          {
              path: '/dashboard/users',
              name: 'usersSettings',
              component: usersSettings,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Users'
              }
          },
          {
              path: '/dashboard/users/add',
              name: 'addUsers',
              component: addUsers,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Add User'
              }
          },
          {
              path: '/dashboard/users/:id/edit',
              name: 'editUsers',
              component: editUsers,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Edit User'
              }
          },
          {
              path: '/dashboard/reviews',
              name: 'reviewsSettings',
              component: reviewsSettings,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Reviews'
              }
          },
          {
              path: '/dashboard/reviews/:id/edit',
              name: 'editReviews',
              component: editReviews,
              meta: {
                  requiresAuth: true,
                  admin: true,
                  layout: 'admin',
                  breadCrumb: 'Edit Review'
              }
          },
          // public routes
          {
              path: "/",
              name: 'home',
              component: pageHome,
              meta: {
                  breadCrumb: 'Home Page'
              }
          },
          {
              path: "/products/:slug",
              name: 'SingleProduct',
              component: SingleProduct,
              meta: {
                  breadCrumb: 'Product'
              }
          },
          // auth
          {
              path: '/profile',
              name: 'profile',
              component: Profile,
              meta: {
                  requiresAuth: true,
                  breadCrumb: 'Profile'
              }
          },
          {
              path: '/register',
              name: 'register',
              component: Register,
              meta: {
                  breadCrumb: 'Register'
              }
          },
          {
              path: '/login',
              name: 'login',
              component: Login,
              meta: {
                  breadCrumb: 'Login'
              }
          }
      ]
  });
  
  
  router.beforeEach((to, from, next) =&gt; {
      if (to.matched.some(record =&gt; record.meta.requiresAuth)) {
          if (!store.getters.isLoggedIn) {
              next({
                  name: 'login'
              })
          } else {
              next()
          }
      }
      if (to.matched.some(record =&gt; record.meta.admin)) {
          if (store.getters.loggedUser.type !== 'admin') {
              next({
                  name: 'home'
              })
          } else {
              next()
          }
      }
      next()
  });
  
  router.afterEach((to, from) =&gt; {
      Vue.nextTick(() =&gt; {
          document.title = to.pageTitle || 'Test App';
      });
  });
  
  export default router;
  </code></pre>