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. Java学习过程中的总结的小知识点(长期更新)

    Java学习过程中的总结的小知识点 (主要是自己不会的知识和容易搞错的东西) 计算某个程序运行的时间 long stime=System.currentTimeMillis(); copy3(file ...

  2. 弹框控件 UIAlertView UIActionSheet

    // 创建弹框 从底部弹出,一般用于危险操作 UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"恭喜通关" ...

  3. CSS3教程:box-sizing属性的理解

    说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内.这 ...

  4. bind绑定参数

    const curry = (fn) => (...args)=>fn.bind(null,...args); const split = curry((splitOn, str) =&g ...

  5. markdown语法与使用

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 语法 # 文本 =>h1标签 ##文本 =>h2标签 *文本* =&g ...

  6. Android开发 default activity not found

    新建的项目,今天打开的时候,发现无法编译了.编译按钮无法点击,必须edit configuration.并且报错 default activity not found. 解决: 少写了一个" ...

  7. SqlMapConfig.xml

    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE configurationPUBLIC &qu ...

  8. java常用工具

    /** * 将字节数组转换成字符串 * @param array 字节数组 * @return String */ public static String byte2str(byte[] array ...

  9. 2>&1

    经常关注linux脚本的人,一定看到过 2>&1 这样的用法,最初一定不明白其中的含义以及为什么是这样的一种组合.昨天偶然间再次看到了这个 2>&1 的写法,遂下决心搞明白 ...

  10. mysql数据库史上最详细起步教程(1)

    本文主要讲解mysql的操作,尽量保证步骤的详细与清晰,希望能帮到大家. 1.登录后进行数据库的创建:create database lf(数据库名);  (一定要记住分号,mysql在语句的结束符就 ...