Первый Example.vue хорошо загружен, ссылки в порядке, когда я нажимаю «Перейти на страницу A» (или страницу B), URL-адрес в браузере изменяется и отображает правильный URL localhost/tlara/public/PageA (или PageB), но содержимое страницы не обновляется .
Проблема возникает для всех. vue.
vuejs 2 + vue-router@3.1.3 Официальный маршрутизатор для Vue. js 2
ресурсы / js / app. js
import Vue from 'vue';
window.Vue=Vue;
require ('./bootstrap');
import VueRouter from 'vue-router'
Vue.use(VueRouter);
const appRoutes=[
{ path : '/root',
component : require('./components/PageRoot.vue') ,
name : 'pageRoot'
},
{ path : '/pageA',
component : require('./components/PageA.vue'),
name : 'pageA'
},
{ path : '/pageB',
component : require('./components/PageB.vue'),
name : 'pageB'
},
];
const router=new VueRouter({
mode : "history",
base : window.tlara.APP_URL_BASE_VUEJS, /* ="/tlara/public/" */
routes : appRoutes
});
const app = new Vue({
el: '#app',
router,
render: r => r(require('./components/Example.vue').default),
mounted : function() {
console.log('here ',this.$route);
}
});
resources / views / vue .blade. php (целевая страница)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<title>Vue Examples</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
window.tlara={
basePath : "{{$basePath}}",
APP_URL : "{{$APP_URL}} ",
APP_URL_BASE_VUEJS : "{{$APP_URL_BASE_VUEJS}}",
}
</script>
<script src="js/app.js"></script>
</body>
</html>
>resources/components/Example.vue
<template>
<div>
<H1>EXAMPLE</H1>
<router-link :to="{name : 'pageRoot' }">Go to Root</router-link>
<br>
<router-link :to="{name : 'pageA' }">Go to pageA</router-link>
<br>
<router-link :to="{name : 'pageB' }">Go to pageB</router-link>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
resources / js / components / PageA. vue (стр. B. vue, пример. vue, стр. Root. vue похожи, кроме тега H1)
<template>
<div>
<H1>Page A</H1>
<br>
<router-link :to="{name : 'root' }">Go to Root</router-link>
<br>
<router-link :to="{name : 'pageA' }">Go to pageA</router-link>
<br>
<router-link :to="{name : 'pageB' }">Go to pageB</router-link>
</div>
</template>
<script>
export default {
}
</script>