javascript - Vue路由器链接不呈现
问题描述
我正在构建带有路由的简单 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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attribution">CARTO</a>',
}
);
this.tileLayer.addTo(this.map);
},
initLayers() {
}
},
}
</script>
<style>
#map {
height: 600px;
}
</style>
奇怪的是,App 中的路由器视图工作正常,而且如果我在索引文件中 console.log 路由器,它有两条路由,我添加了。但是 router-link 元素不渲染!
PS我依靠本教程。
解决方案
推荐阅读
- android - 如果“值”在kotlin中有“null”或“0”,如何过滤列表
- html - 在文本左侧添加图像
- python - Python二分法
- amazon-web-services - AWS efs 挂载权限被拒绝
- macos - 当应用程序不在 /Applications 目录中时,如何从 mac 启动板添加或删除应用程序快捷方式
- static-site - 使用静态站点生成器的所有网页是否可能有通用页眉/页脚
- html - CSS文件中的每个页面都有自己的ID
- angular - 错误语法错误:位置 0 处 JSON 中的意外标记 u
- karate - 将现有的空手道项目从版本 0.8.0 迁移到 0.9.5 - 要使用的文件夹结构
- angular - ionic build --prod 错误:找不到管道“safe2”