Маршрутизатор-ссылка внутри компонента не показывает контент

У меня проблемы с подключением к маршрутизатору, у меня есть следующее:

Routes.js:

import Homepage from './components/homepage/Homepage'
import About from './components/About'

export default{
    mode: 'history',

    routes: [
      {
        path: '/',
        name: 'Home',
        component: Homepage
      },
      {
        path: '/about',
        component: About
      }
    ]
 };

App.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import Routes from './routes';
import Buefy from 'buefy';
import Header from './components/header/Header'
import './plugins/element.js';
import '@mdi/font/css/materialdesignicons.css';

Vue.use(Buefy, {});
Vue.use(VueRouter);

new Vue({
 el: '#app',
 router: new VueRouter(Routes)
})

new Vue({
 render: h => h(Header),
}).$mount('#header')

welcome.blade.php

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

    <title>title</title>

</head>
<body>
    <div id="header"></div>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="/js/app.js"></script>
</body>
</html>

Header.vue

        <template>
        <b-navbar>
            <template slot="brand">
                <b-navbar-item tag="router-link" to="/">
                    <img
                        src="../../../assets/images/logo.png"
                        alt="elculatín, tu website de tiro con arco de referencia"
                    >
                </b-navbar-item>
            </template>
            <template slot="start">
                <router-link>
                    Inicio
                </router-link>
              ...

И мой вопрос,

почему router-link не показывает никакого контента?

Когда я пытаюсь использовать этот тег (как тег в b-navbar-item или непосредственно как «‹ router-link> ») внутри компонента заголовка, ничего не появляется.

Если я помещу ‹router-link> any‹ / router-link> в welcome.blade.php, он заработает.

Я пробую разные способы, с: name,: path, и ничего не работает.

Буду очень признателен за совет.

Заранее спасибо!


vue.js laravel vue-router buefy
person Adrián Martín    schedule 06.05.2020    source источник

Ответы (4)


arrow_upward
0
arrow_downward

В вашем файле Routes.js.

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
    mode: 'history',

    routes: [
      {
        path: '/',
        name: 'Home',
        component: Homepage
      },
      {
        path: '/about',
        component: About
      }
    ]
})

Затем в вашем файле app.js:

import router from './router'

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || "Cat";
  next();
});

new Vue({
  router,
  render: h => h(Header)
}).$mount('#app')

Header.vue

    <template slot="start">
      <b-navbar-item tag="router-link" :to="{ name: 'about' }">About</b-navbar-item>
    </template>
person beingyogi    schedule 06.05.2020
comment
Я уже пробовал, но не получается :(, тоже самое, ничего не появляется. - person Adrián Martín; 07.05.2020

arrow_upward
0
arrow_downward

Спасибо Йогешу за быстрый отклик, все равно не получается, у меня небольшая разница в приложениях:

import Vue from 'vue'
import VueRouter from 'vue-router';
import Routes from './routes';
import Buefy from 'buefy';
import Header from './components/header/Header'
import './plugins/element.js';
import '@mdi/font/css/materialdesignicons.css';

Vue.use(Buefy, {});
Vue.use(VueRouter);

Routes.beforeEach((to, from, next) => {
  document.title = to.meta.title || "Cat";
  next();
})


new Vue({
  el: '#app',
  Routes
})

new Vue({
  render: h => h(Header),
  Routes
}).$mount('#header')

Тоже пробовал с твоей версией, результат тот же :(

Я не знаю, почему не работает, это только панель навигации внутри компонента «Заголовок», также я пытался добавить ссылку на маршрутизатор внутри другого компонента в «приложении», результат тот же.

person Adrián Martín    schedule 07.05.2020

arrow_upward
0
arrow_downward

Обновление, извините, я не проверял инспектор, у меня вот такое:

app.js:84435 TypeError: Cannot read property 'resolve' of undefined
at Proxy.render (app.js:80670)
at VueComponent.Vue._render (app.js:86089)
at VueComponent.updateComponent (app.js:86605)
at Watcher.get (app.js:87016)
at new Watcher (app.js:87005)
at mountComponent (app.js:86612)
at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:91582)
at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:94482)
at init (app.js:85663)
at createComponent (app.js:88511)
person Adrián Martín    schedule 07.05.2020

arrow_upward
0
arrow_downward

Я уже решил, создав один «отцовский» компонент App.vue:

<template>
    <div id="app">
        <header-nav/>
        <div id="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>

import Header from "./header/Header"

export default {
  name: 'App',
  components: {
    "header-nav": Header
  }
}

</script>

welcome.blade.php тело:

    <body>
       <div id="app">           
       </div>
       <script src="/js/app.js"></script>
    </body>

routes.js:

import Homepage from './components/homepage/Homepage';
import About from './components/About';
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
    mode: 'history',

    routes: [
        {
            path: '/',
            name: 'Home',
            component: Homepage
        },
        {
            path: '/about',
            component: About
        }
    ]
});

Apps.js:

import Vue from 'vue';
import routes from './routes';
import Buefy from 'buefy';
import App from './components/App';
import './plugins/element.js';
import '@mdi/font/css/materialdesignicons.css';

require('./bootstrap');

Vue.use(Buefy, {});

new Vue({
    router: routes,
    render: h => h(App),
  }).$mount('#app')

Я предполагаю, что старая структура несовместима с vue-router.

person Adrián Martín    schedule 07.05.2020