重定向到 Laravel 路由 VueJS答案

【问题标题】：Redirecting to Laravel Route VueJS重定向到 Laravel 路由 VueJS
【发布时间】：2021-04-26 02:09:57
【问题描述】：

我创建了 OrderGuide.vue 文件，但它无法重定向到我添加到 routes.js 的正确链接 /order-guide .它重定向到 /login，这是 laravel 路由。我错过了什么吗？

OrderGuide.vue

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

routes.js我把/order-guide放在这里

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 组件导航菜单中有一个链接/order-guide。

<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 我添加了 TechstoreNav 的主索引文件，它是 Navbar.vue 组件

<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

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

是的，您可以使用 :to 代替 :href

许多 vuetify 元素继承自 router-link，这就是为什么您可以在 vuetify 元素上使用 to 属性来使 vue 应用程序导航。

【讨论】：