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库的最佳方法详细说明及实现代码
Dec 28 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
jquery密码强度校验
Dec 02 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
JavaScript实现简单的计算器
Jan 16 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
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
浅析Python中的多重继承
2015/04/28 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python实现周期方波信号频谱图
2018/07/21 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
伊索寓言教学反思
2014/05/01 职场文书
师德师风自查总结
2014/10/14 职场文书
党员转正介绍人意见
2015/06/03 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL
vue3不同环境下实现配置代理
2022/05/25 Vue.js