vendredi 29 juin 2018

How to set vue component when root of site is opened

In my laravel 5.6/vue.js 2.5.7 / vuetify": "^1.0.8" I need to set vue component when root of site is opened I mean when I run url

http://local-artists-rating.com

see url reopened

http://local-artists-rating.com/#/

It has navbar, footer defined in my pages, but not any content I defined in resources/assets/js/components/appRoot.vue.

In my resources/assets/js/app.js:

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'

import VueRouter from 'vue-router';
window.Vue.use(VueRouter);

...
import AppRoot from './components/appRoot.vue';
...

const routes = [
{
    path: '/',
    components: {
        ...
        appRoot: AppRoot,
        ...

    }
    ...

    {path: '/not-found/:invalid_url?', component: NotFound, name: 'notFound'},
    {path: '/login', component: AppLogin, name: 'appLogin'},
    {path: '/', component: AppRoot, name: 'appRoot'},
}
    ...

const router = new VueRouter( {
    mode: 'hash', // default
    routes
})


router.beforeEach((to, from, next) => {
    if (!to.matched.length) {
        next(  '/not-found/'+encodeURIComponent(to.path)  );
    } else {
        next();
    }
})



...

new Vue({ router, i18n,

    data:{
        app_title: '',
    },

    mixins : [appMixin],

    created() {
    }, // created() {

    mounted() {

    }, // mounted(){


} ).$mount('#app')  // new Vue({ router,

If I commented line :

path: '/',
at top of routes definitions, I got error in console:

app.js?dt=1529909735:73635 Uncaught Error: [vue-router] "path" is required in a route configuration.
    at assert (app.js?dt=1529909735:73635)
    at addRouteRecord (app.js?dt=1529909735:74771)
    at app.js?dt=1529909735:74741
    at Array.forEach (<anonymous>)
    at createRouteMap (app.js?dt=1529909735:74740)
    at createMatcher (app.js?dt=1529909735:74961)
    at new VueRouter (app.js?dt=1529909735:76055)
    at Object._typeof (app.js?dt=1529909735:4945)
    at __webpack_require__ (app.js?dt=1529909735:20)
    at Object.<anonymous> (app.js?dt=1529909735:50854)

In my resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="">
<head>
    <?php $current_template= 'artists_rating_light' ?>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-cache">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="">

    <title id="app_title"></title>


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">

</head>

<body>

<div id="app">

    <backend-app-layout></backend-app-layout>

</div>

    @include('layouts.footer')
    <script src="?dt="></script>

</body>

</html>

Which is the right way ?

Thanks!



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire