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
question from:
https://stackoverflow.com/questions/65831096/redirecting-to-laravel-route-vuejs