Router-link 内部组件未显示内容
Router-link inside component is not showing content
我在使用 router-link 时遇到一些问题,我有以下问题:
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 没有显示任何内容?
当我尝试在 header 组件中使用此标签(作为 b-navbar-item 中的标签或直接作为“< router-link >”)时,没有任何显示。
如果我在 welcome.blade.php 中放入 < router-link >任何内容< /router-link > 就可以了。
我尝试了不同的方法,使用 :name, :path 但没有任何效果。
非常感谢您的建议。
提前致谢!
在您的 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>
我已经解决了,正在创建一个 "father" 组件 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 不兼容。
我在使用 router-link 时遇到一些问题,我有以下问题:
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 没有显示任何内容?
当我尝试在 header 组件中使用此标签(作为 b-navbar-item 中的标签或直接作为“< router-link >”)时,没有任何显示。
如果我在 welcome.blade.php 中放入 < router-link >任何内容< /router-link > 就可以了。
我尝试了不同的方法,使用 :name, :path 但没有任何效果。
非常感谢您的建议。
提前致谢!
在您的 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>
我已经解决了,正在创建一个 "father" 组件 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 不兼容。