Question

我正在使用路由构建简单的Vue应用。但是，模板中的链接无法呈现，并且出现错误“无法读取未定义的属性'名称'”。

我的索引文件是

import Vue from 'vue'
import App from './App'
import router from './Router'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
})

我在其中添加两条路由的路由器是

import Vue from 'vue'
import Router from 'vue-router'

import ShowMap from './components/ShowMap'
import AddPointOnMap from './components/AddPointOnMap'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            component: ShowMap
        },
        {
            path: '/add',
            component: AddPointOnMap
        }
    ],
    mode: 'history'
})

App.vue是

<template>
    <div id="app" class="container">
        <div class="links">
            <router-link to="/">Map</router-link>
            <router-link to="/add">Add object</router-link>
            <a href="/">Map</a>
            <a href="/add">Add object</a>
        </div>
        <router-view></router-view>
    </div>
</template>     

<script>
    export default {
        name: 'app'
    }
</script>

ShowMap组件是（AddPointOnMap现在是相同的，但名称为“ AddPointOnMap”）

<template>
<div class="row">
    <div class="col-md-12">
        <div id="map"></div>
    </div>
  </div>  
</template>

<script>
    export default {
        name: 'ShowMap',
        data: function () {
            return {
                map: null,
                tileLayer: null,
                layers: []
            }
        },
        mounted: function() {
            this.initMap();
            this.initLayers();
        },
        methods: {
            initMap() {
                this.map = L.map('map').setView([59.93863, 30.31413], 14);

                this.tileLayer = L.tileLayer(
                'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
                {
                    maxZoom: 18,
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>',
                }
                );
                this.tileLayer.addTo(this.map);
            },
            initLayers() {

            }
        },
    }
</script>

<style>
    #map {
        height: 600px;
    }
</style>

奇怪的是，App中的router-view可以正常工作，此外，如果我在索引文件中的console.log路由器有两条路由，我会添加它们。但是路由器链接元素无法呈现！

P.S。我依靠this教程。

Vue路由器链接无法呈现

0 个答案: