vue-router 中router-view不能渲染

最近在做一个vue的项目，其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。

项目目录结构

其中main.js

import Vue from 'vue';
import App from './App';
import router from './router';/* eslint-disable no-new */
new Vue({el: '#app',router,render: h => h(App)
});

app.vue

<template><div id="app"><div class="tab"><div class="tab-item"><router-link to="/goods">商品</router-link></div><div class="tab-item"><router-link to="/ratings">评论</router-link></div><div class="tab-item"><router-link to="/seller">商家</router-link></div></div><div><router-view></router-view></div></div>
</template><script>export default {name: 'app',components: {}};
</script><style lang="stylus" rel="stylesheet/stylus">.tabdisplay: flexwidth: 100%height: 40pxline-height: 40px.tab-itemflex: 1text-align: center& > adisplay: block
</style>

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from '../components/goods/goods.vue';
import ratings from '../components/ratings/ratings.vue';
import seller from '../components/seller/seller.vue';Vue.use(VueRouter);const routes = [{ path: '/goods', component: goods },{ path: '/ratings', component: ratings },{ path: '/seller', component: seller },{ path: '*', redirect: '/goods' }
];const router = new VueRouter({routes: routes      //注意是routes而不是routers,坑就在这里
});export default router;

其中在index.js中使用了各种方法，最后查看文档发现原来是routes惹的祸，每次都写的是routers，导致路由根本就没有导入进去，所以在渲染的时候一直不能显示content。如下官方文档中的例子：

转载于:https://www.cnblogs.com/ontheway1215/p/6891627.html

vue-router 中router-view不能渲染相关推荐

dom渲染完毕再渲染数据_在vue组件中，异步手动渲染dom
在业务中,页面会动态的渲染组件,组件中会根据数据,去特殊处理渲染dom元素,当遇到需要异步的去渲染时,会出现异步的问题无法正常显示.如下,重新生成一个组件进行渲染. 使用基础 Vue 构造器,创建一个 ...
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍轻量级.可靠的移动端 Vue 组件库有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性拥 ...
使用vue-i18n切换中英文-网页语言切换案例-vue文件中或路由(Router)文件中使用
vue-i18n地址安装 npm install vue-i18n 使用在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue- ...
vue中$router.push打开新窗口
vue中$router.push打开一个新窗口 this.$router.push("/CustomView/systemManage/CustomView"); //跳转// 默 ...
vue $route及$router的区分
参考网站 https://www.cnblogs.com/czy960731/p/9288830.html https://blog.csdn.net/qxb5215/article/details/ ...
【vue】路由Router基础详解，带你快速入门~
什么是路由后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源. 前端路由: 对于单页面应用程序来说,主要通过改变URL中的 hash(#) 来实现不同页 ...
angular4 php,Angular4中router使用技巧
这次给大家带来Angular4中router使用技巧,Angular4中router使用的注意事项有哪些,下面就是实战案例,一起来看一下. router,也就是路由,是前端中一个比较重要的概念.通过r ...
vue项目没有router文件夹_vue项目——Vue Router路由的使用
前言: 学习vue也有一段时间了,这里把学习整个vue项目中的一些知识点和问题,整理下方便自己记录,也希望给大家带来方便.我会连续写几篇系统的文章,讲解一个完整的vue项目中用到的各个使用模块.今天先 ...
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
1. 前言 (1) 资料 (2) 需求本文是在上篇<使用vue-i18n实现多语言>功能的引申.需要实现的功能如下: 多语言需要反映在url上,英文.简体中文.繁体中文页面需分别为/en ...

vue-router 中router-view不能渲染

vue-router 中router-view不能渲染相关推荐

最新文章

热门文章