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. C# WinForm 技巧:COMBOBOX搜索提示

    comboBox和textBox支持内置的搜索提示功能, 在form的InitializeComponent()中添加如下语句:   this.comboBox1.AutoCompleteCustom ...

  2. iOS多线程-RunLoop简介

    什么是RunLoop? 从字面上来看是运行循环的意思. 内部就是一个do{}while循环,在这个循环里内部不断的处理各种任务(比如:source/timer/Observer) RunLoop的存在 ...

  3. GMOLO平板——如何安装新系统

    1.首先,此款平板采用intel处理器Z3735F,不支持Win7,XP,经过测试,Win8可以在此类笔记本及平板上运行,并非只能安装最新的Win10系统. 2.下载Win8 32位系统作为预备(GH ...

  4. Create a new Windows service on windows server2012

    netsh http add iplisten ipaddress=0.0.0.0:15901 sc.exe create "FPPService" binPath= " ...

  5. MAC下Homebrew的安装

    1.Homebrew是啥东东? Homebrew的官方网站http://brew.sh/index.html上有这么一句“Homebrew installs the stuffyouneed that ...

  6. JS学习:第一周——NO.4继承

    1.[关于call] 作用:是用来改变this指向的,有两种参数 第一种:第一个参数,用来改变this指向 第二种:给call前面的函数传参,从第二个参数开始,给call前面的函数从左到右一个个的传参 ...

  7. 基于Unity3D 的Vuforia SDK开发基础教程

    最新博客地址已转到: http://blog.csdn.net/zzlyw?viewmode=contents   ------------------------------------------ ...

  8. 2016 Google code jam 答案

    二,RoundC import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNotFoundE ...

  9. 使用Dir,遍历文件夹下所有子文件夹及文件

    '------------------------------------------- '获取某文件夹下所有文件和子目录下的文件 '--------------------------------- ...

  10. ElasticSearch详解与优化设计

    简介 概念 安装部署 ES安装 数据索引 索引优化 内存优化 1简介 ElasticSearch(简称ES)是一个分布式.Restful的搜索及分析服务器,设计用于分布式计算:能够达到实时搜索,稳定, ...