Redirecting to Laravel Route VueJS

Question

I have created OrderGuide.vue file but it cannot redirect to it's proper link /order-guide that I added to routes.js. It redirects to /login which is the laravel route. Did I miss anything?

OrderGuide.vue

<template>
<div>
   <TechstoreNav></TechstoreNav>
    <v-container>
        <h2>ORDER GUIDE</h2>
    </v-container>
</div>
</template>

routes.js I put /order-guide here

window.Vue = require('vue');

import VueRouter from 'vue-router'
import titleMixin from './titlemixin'
import store from './store';

Vue.use(VueRouter)
Vue.mixin(titleMixin)

let routes = [
{
    path:  '/order-guide',
    component: require('./components/OrderGuide.vue').default
},
{
    path: '/admin/dashboard',
    component: require('./components/auth/admin/Dashboard.vue').default,
    meta: {
        requiresAuth: true
    },
    beforeEnter: (to, from, next) => {
        store.dispatch('fetchAuthUser').then(() => {
            if(store.getters.getUser.user_type == 1){
                next()
            }else{
                next('/shop')
            }
        });
    }
},
];
// Other routes
  const router = new VueRouter({
  mode: 'history',
  routes
});

Navbar.vue component There is a link /order-guide in navigation menus.

<template>
<v-app-bar
app
color="#122946"
flat
dark
class="techstore-nav"
>
<v-container class="py-0 fill-height">
    <v-toolbar-title><h2><b>TechStore </b>PH</h2></v-toolbar-title>
    <v-spacer></v-spacer>     
  <v-btn
    v-for="link in links"
    :key="link.id"
    text
    :href="link.link"
    class="navlinks"
  >
    {{ link.title }}
 </v-btn>
  <v-spacer></v-spacer>
 </v-container>
 </v-app-bar>
</template>
<script>
   export default {
   data: () => ({
   links: [
    {id: 1, title: 'HOME',link: '/'},
    {id: 2, title: 'SHOPPING',link: '/shopping'},
    {id: 3, title: 'LOGIN',link: '/login'},
    {id: 4, title: 'REGISTER',link: '/register'},
    {id: 5, title: 'ORDER GUIDE',link: '/order-guide'}
  ]
  }),
}
</script>

Index.vue Main Index File where I added TechstoreNav which is Navbar.vue component

<template>
  <v-app id="inspire">
  <TechstoreNav></TechstoreNav>
  <v-main>
     //some content
  </v-main>
  </v-app>
<template>

index.blade.php

@extends('layouts.app')

@section('content')
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TechStore PH</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" 
     rel="stylesheet">
</head>
<body>
    <div id="app">
        <index></index>
    </div>
</body>
</html>
@endsection

Joshua Angnoe · Accepted Answer · 2021-01-21 16:51:27Z

1

Yes, you may use :to instead of :href

Many vuetify elements inherit from router-link, that is why you can use the to attribute on vuetify elements to make the vue application navigate.

answered Jan 21, 2021 at 16:51

Joshua Angnoe

1,0856 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redirecting to Laravel Route VueJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related