0

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

订单指南.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
4

1 回答 1

0

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

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

于 2021-01-21T16:51:27.990 回答