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. R自动数据收集第一章概述——《List of World Heritage in Danger》

      导包     library(stringr) library(XML) library(maps) heritage_parsed <- htmlParse("http://en ...

  2. javac -encoding utf8 in linux

    由于另外负责编码的同事用的是utf-8,我用的默认的编码格式gbk,在提交代码时,为了迁就他,我打算把格式用工具转成utf-8. 转化成果后,然后在make一下,发现javac -encoding u ...

  3. Mac Pro 编译安装 Redis 的 PHP 客户端 phpredis

    1.去官网下载 redis 扩展源码包 https://github.com/phpredis/phpredis 2.安装 redis 扩展 /usr/local/src/mac-sdk/source ...

  4. Java 多线程编程

    1.synchronized/wait/notify package javamultithread; import java.util.logging.Level; import java.util ...

  5. 李炎恢《PHP第二季视频教程》之总结

    课时 <面向对象工具[1]>. 语法: __autoload.  __call.__tostring.__clone 1.   autoload 自动引用类.不用包含类,call屏蔽调用类 ...

  6. 教你怎么快速配置 React

    导读 React 是一个构建用户界面的库,而它只是组成一个应用的一部分.应用还有其他的部分——风格.路由器.npm 模块.ES6 代码.捆绑和更多——这就是为什么使用它们的开发者不断流失的原因.这被称 ...

  7. 创建table并实现ID自增长

    ① create table p_user( id               number(10) not null primary key, name             varchar2(3 ...

  8. C语言 完美字符串

    约翰认为字符串的完美度等于它里面所有字母的完美度之和.每个字母的完美度可以由你来分配,不同字母的完美度不同,分别对应一个1-26之间的整数. 约翰不在乎字母大小写.(也就是说字母F和f)的完美度相同. ...

  9. Django (2)

    一.Django基本   程序编写 a. url.py        /index/    ->   func b. views.py def func(request):     # 包含所有 ...

  10. 《A Convolutional Neural Network Cascade for Face Detection》

    文章链接:   http://pan.baidu.com/s/1bQBJMQ  密码:4772 作者在这里提出了基于神经网络的Cascade方法,Cascade最早可追溯到Haar Feature提取 ...