vue-router 中router-view不能渲染的解决方法


Posted in Javascript onMay 23, 2017

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

项目目录结构

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">
 .tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  .tab-item
   flex: 1
   text-align: center
   & > a
    display: 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。如下官方文档中的例子:

vue-router 中router-view不能渲染的解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的前端数据通用验证库
Aug 08 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
angular+webpack2实战例子
May 23 #Javascript
jquery实现图片轮播器
May 23 #jQuery
详解用node编写自己的cli工具
May 23 #Javascript
JavaScript 巧学巧用
May 23 #Javascript
JS获取短信验证码倒计时的实现代码
May 22 #Javascript
原生JS实现不断变化的标签
May 22 #Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
You might like
Yii框架分页实现方法详解
2017/05/20 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
python图片验证码生成代码
2016/07/02 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python获取txt文件词向量过程详解
2019/07/05 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
简单了解django orm中介模型
2019/07/30 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
党的群众路线查摆剖析材料
2014/10/10 职场文书
80后婚前协议书范本
2014/10/24 职场文书
2014年店长工作总结
2014/11/17 职场文书
法律进社区活动总结
2015/05/07 职场文书
跑吧孩子观后感
2015/06/10 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
python tkinter实现定时关机
2021/04/21 Python