[英]router-view and component in vue app (laravel)
I am trying to have a router-view and component in my Laravel blade file. 我正在尝试在Laravel刀片文件中添加路由器视图和组件。 The router-view
works perfectly and it changes component based on the page URL. router-view
可完美运行,并根据页面URL更改组件。 However I want to add a <nav></nav>
component above my router-view
so that I can load in the navigation on each page. 但是我想在router-view
上方添加一个<nav></nav>
组件,以便可以在每个页面的导航中加载。
My question is, what is wrong? 我的问题是,怎么了? It doesn't work, currently the <router-view>
loads the correct components, however the <nav>
does not load anything in. 它不起作用,当前<router-view>
会加载正确的组件,但是<nav>
不会加载任何内容。
App.js: App.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import Vuetify from 'vuetify';
import {routes} from './routes';
import Nav from './components/Nav.vue';
import store from './store.js';
import axios from 'axios';
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(Vuetify);
Vue.config.productionTip = false;
const router = new VueRouter({
routes,
});
const app = new Vue({
el: '#app',
store,
router,
components: {
Nav
}
});
Master.blade.php: Master.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="_token" content="{!! csrf_token() !!}"/>
<title>Laravel</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet"/>
</head>
<body>
<div id="app">
<nav></nav>
<router-view></router-view>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Nav.vue: 导航:
<template>
<div>
<p>hey</p>
</div>
</template>
<script>
export default {
name: "nav"
}
</script>
<style scoped>
</style>
除了nav
之外,只需为组件使用其他名称,因为它是有效的HTML保留标记。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.