组件内的路由器链接未显示内容
[英]Router-link inside component is not showing content
问题描述
I'm having some issues with router-link, I have the followings:
我在使用路由器链接时遇到了一些问题，我有以下问题：
Routes.js:路线.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应用程序.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 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 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>
...
And my question is,我的问题是，
why router-link is not showing any content?为什么 router-link 没有显示任何内容？
When I try to use this tag (as tag in b-navbar-item or directly as "< router-link >") inside header component, nothing appears.当我尝试在 header 组件中使用此标签（作为 b-navbar-item 中的标签或直接作为“< router-link >”）时，什么也没有出现。
If I put < router-link >whatever< /router-link > in welcome.blade.php it works.如果我将 < router-link >whatever</router-link > 放入 welcome.blade.php 中，它可以工作。
I try different ways, with:name, :path and nothing worked.我尝试了不同的方法，使用：name，：path，但没有任何效果。
I would really appreciate some advice.我真的很感激一些建议。
Thanks in advance!提前致谢！
4 个解决方案
解决方案1
0 2020-05-06 17:12:07
In your Routes.js file.在您的 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
}
]
})
Then in your app.js file:然后在您的 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 Header.vue
<template slot="start">
<b-navbar-item tag="router-link" :to="{ name: 'about' }">About</b-navbar-item>
</template>
解决方案2
0 2020-05-07 08:26:02
Thanks Yogesh for the fast response, it's still failing, I have a little difference in apps:感谢 Yogesh 的快速响应，它仍然失败，我的应用程序有点不同：
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')
Also I tried with your version, same result:(我也试过你的版本，同样的结果:(
I don't know why is not working, is only a navbar inside a component "Header", also I tried to add router-link inside other component in "app", same result.我不知道为什么不起作用，只是组件“Header”中的导航栏，我也尝试在“app”中的其他组件中添加路由器链接，结果相同。
解决方案3
0 2020-05-07 11:07:01
An update, sorry I was not checking the inspector, I have this:更新，抱歉我没有检查检查员，我有这个：
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)
解决方案4
0 已采纳 2020-05-07 13:57:00
I already solved, creating one "father" component App.vue:我已经解决了，创建了一个“父亲”组件 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: Welcome.blade.php 正文：
<body>
<div id="app">
</div>
<script src="/js/app.js"></script>
</body>
routes.js:路线.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:应用程序.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')
I guess the old structure is not compatible with vue-router.我猜旧的结构与 vue-router 不兼容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.