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. 【IDEA 2016】intellij idea tomcat jsp 热部署

    刚开始用IDEA,落伍的我,只是觉得IDEA好看.可以换界面.想法如此的low. 真是不太会用啊,弄好了tomcat.程序启动竟然改动一下就要重启,JSP页面也一样. IDEA可以配置热部署,打开to ...

  2. java从基础知识(七)java集合

    一.集合类介绍 1.List(元素有放入顺序,可重复) 1.1.List的实现 1.1.1.ArrayList ArrayList就是动态数组(需要连续的存储空间),用MSDN中的说法,就是Array ...

  3. Linux下实现秒级的crontab定时任务

    crontab的格式如下 * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 ...

  4. [2016-10-24]jQuery学习回顾笔记1.0

    一.如何把 jQuery 添加到网页 <script> 标签应该位于页面的 <head> 部分. <head> <script src="jquer ...

  5. 大型App要搞的几个系统

    路由模块: 解耦各个业务,统一收敛页面跳转,动态决策跳转实现:   鉴权模块:收敛鉴权项目(比如登录.输入密码.短信验证.扫脸),后台动态控制鉴权项目:   收银台:收敛支付,统一到收银台:   开关 ...

  6. C#实现快速排序

    网上很多关于快速排序的教程,嗯,不错,版本也很多,有的试了一下还报错..呵呵 于是乎低智商的朕花了好几天废了8张草稿纸才弄明白.. 快速排序的采用的分治啊挖坑填数啊之类的网上到处都是,具体过程自己百度 ...

  7. 一些有趣的Javascript技巧

    整理一些刷题时学会的小技巧…… 目录: 即大于0又小于0的变量 String.split() 与 正则表达式 缓存的几种方法 初始化一个数组 即大于0又小于0的变量 问题: 设计一个变量val,使得以 ...

  8. U3D学习笔记1: HelloWorld

    Unity 版本: 5.3.5.f1 Hello World工程 1.新建工程 HelloWorld U3D可选2D和3D游戏   2.新建C#脚本文件 在project栏的assets目录右键-&g ...

  9. Rails 5 开发进阶

    Rails 5 开发进阶:https://www.gitbook.com/book/kelby/rails-beginner-s-guide/details   cancan : http://blo ...

  10. 性能优化方法(Z)

    关于C#程序优化的五十种方法 作者: 字体:[增加 减小] 类型:转载 时间:2013-09-12我要评论 这篇文章主要介绍了C#程序优化的五十个需要注意的地方,使用c#开发的朋友可以看下 一.用属性 ...