http://router.vuejs.org/zh-cn/essentials/nested-routes.html

使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引用

main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import App from './App';
import goods from './components/goods/goods';
import ratings from './components/ratings/ratings';
import seller from './components/seller/seller';

const router = new VueRouter({
    routes:[
        {
            path:'',component:App,
            children: [
                {
                    path:'',
                    component:goods
                },
                {
                    path:'goods',
                    component:goods
                },
                {
                    path:'ratings',
                    component:ratings
                },
                {
                    path:'seller',
                    component:seller
                }
            ]
        }
    ]
})

const app = new Vue({
    router
}).$mount('#app');

使用router.go('/goods')会造成页面不断刷新

2.0版本下使用router.push('/goods‘);

【vuejs小项目——vuejs2.0版本】单页面搭建的更多相关文章

  1. 【vuejs小项目——vuejs2.0版本】组件化的开发方式

    对于多张页面需要里存在相同模块,可以进行组建化的开发模式. 例如:此处需要一个评分标准组件,创建一个components/star/star.vue. 在需要引入该组建的页面上 import进去< ...

  2. 从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)

    原网址:https://blog.csdn.net/u012907049/article/details/72764151 前言 VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用v ...

  3. 【vuejs小项目】一、脚手架搭建工作

    一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...

  4. react_app 项目开发 (3)_单页面设计_react-router4

    (web) 利用 react-router4 实现 单页面 开发 SPA 应用 ---- (Single Page Web Application) 整个应用只有 一个完整的页面 单击链接不会刷新页面 ...

  5. Vue项目中设置每个单页面的标题

    两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{     path: '/',     name: ...

  6. 基于Vue2.0的单页面开发方案

    2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢. 毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高 ...

  7. WordPress版微信小程序2.0版本发布

    利用业余时间对WordPress版微信小程序进行的升级,增加了一些功能,程序性能上做了一些优化.经过此次的版本升级,WordPress版微信小程序所需的基本功能已经具备. 开放源码地址:https:/ ...

  8. Maven web项目(简单的表单提交) 搭建(eclipse)

    我们将会搭建一个,基于Maven管理的,具有简单的表单提交功能的web项目,使用DAO--service--WEB三层结构,服务器使用Tomcat 1 项目基本结构的搭建 左上角File---> ...

  9. rocketmq 4.2.0 版本 控制台本地搭建(史上最简单教程)

    就像发现新大陆一般,瞎折腾,搞出来了..并没有网上说的一大串....(本人公司的项目从未使用过springboot....) rocketmq  控制台,官方使用springboot 做后端,前端使用 ...

随机推荐

  1. 20155324王鸣宇对C语言课程回顾及对Java的展望

    # 第二次预备作业 你有什么技能比大多人(超过90%以上)更好? 针对这个技能的获取你有什么成功的经验? 与老师博客中的学习经验有什么共通之处? 我谦虚的说整个2015级五系英雄联盟这个游戏我最厉害( ...

  2. Nacl开发

    环境搭建:http://www.bojinxiaozhu.com/2014/0221/80.html http://blog.csdn.net/xoyojank/article/details/814 ...

  3. Java Web ——http协议响应报文

    HTTP 响应报文 HTTP 响应报文由状态行.响应头部.空行 和 响应包体 4 个部分组成,如下图所示: 下面对响应报文格式进行简单的分析: 状态行:状态行由 HTTP 协议版本字段.状态码和状态码 ...

  4. Uva 11732 strcmp() Anyone?

    strcmp() Anyone? Time Limit: 2000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu [Subm ...

  5. AVPlayer

    AVPlayer     AVPlayerLayer是CALayer的一个子类,由于AVPlayer这个播放器只能安置在AVPlayerLayer 这个图层之上,所以我们需要实例化一个UIView,并 ...

  6. JSTL标签库(一)核心标签库

    核心标签库(core) 1.表达式操作 2.流程控制 3.迭代操作 4.URL操作 1.表达式操作 标签 语法 功能 说明 <c:out> <c:out value="&l ...

  7. Android Studio Error:CreateProcess error=216

    Error:CreateProcess error=216, This version of %1 is not compatible with the version of Windows you' ...

  8. CMake学习笔记

    C++开发者必备技能CMake  先简单介绍一下,CMake是一个跨平台的编译工具,它可以根据不用的平台,不同的编译环境,生成不同的MakeFile,从而控制编译的过程. 使用CMake的步骤: 1. ...

  9. iOS sqlite数据库图像化查看

    问题描述:在xocde上用sqlite数据库的时候,因为没有图形化界面,有些时候很难看出自己设计的数据库是否有问题,比如我刚上手sqlite数据库设计id为自增长时,很自然的用了identify(1, ...

  10. 高性能MySQL(五):查询性能优化

    当向MySQL 发送一个请求的时候MySQL 到底做了什么? 1.客户端发送一条查询给服务器 2.服务器先检查查询缓存,如果命中了缓存,则立即返回存储在缓存中的结果.否则进入下一阶段 3.服务器端进行 ...