Question

在我的laravel 5.6 / vue.js 2.5.7 / vuetify中：“ ^ 1.0.8”我需要在网站根目录打开时设置vue组件我的意思是当我运行url

http://local-artists-rating.com

查看网址已重新打开

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

它在我的页面中定义了导航栏和页脚，但没有在resources / assets / js / components / appRoot.vue中定义的任何内容。

在我的资源/资产/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,

如果我评论第：

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)

在我的资源/视图/布局/app.blade.php中：

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<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="{{ csrf_token() }}">

    <title id="app_title">{{ config('app.name', 'Laravel') }}</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="{{ asset('js/app.js'    ) }}{{  "?dt=".time()  }}"></script>

</body>

</html>

哪种方法是正确的？

谢谢！

网站根目录打开后如何设置vue组件

0 个答案: