最近复习了vue，项目实战前有练手，做一个简单的单页面应用。

1.router-view就是我们渲染的组件，router-view被包裹在一个div中，一旦路由跳转，router-view就会被渲染为新的组件

2.我们在router数组中有很多对象，每个对象中有路由和路由映射的组件，路由跳转，router-view就会渲染

3.在模块化开发中，import这个思想很重要，所有不在一起的路由，都需要import去引入才能使用，比如在app.vue中使用其他组件

首先引入组件，然后在app的components中注册

4.先写这么多，以后在补充

single-page关于vue-router的更多相关文章

  1. vue & $router & History API

    vue & $router gotoTemplateManage(e) { e.preventDefault(); this.$router.push({ path: `/operate-to ...

  2. Vue躬行记（8）——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  3. SPA（single page application）

    一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容 ...

  4. Vue Router的简单了解

    Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转.Vue开发的是单页面应用(Single Page Application,SPA),不能使 ...

  5. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  6. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  7. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  8. Vue Study [2]: Vue Router

    Description The article for vue router. Original post link:https://www.cnblogs.com/markjiang7m2/p/10 ...

  9. Vue Router的配置

    1.beforeEnter function requireAuth (route, redirect, next) { if (!auth.loggedIn()) { redirect({ path ...

  10. [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

随机推荐

  1. UVa 208 Firetruck【回溯】

    题意:给出一个n个节点的无向图,以及某个节点k,按照字典序从小到大输出从节点1到节点k的所有路径 看的题解 http://blog.csdn.net/hcbbt/article/details/975 ...

  2. [国家集训队]整数的lqp拆分 数学推导 打表找规律

    题解: 考场上靠打表找规律切的题,不过严谨的数学推导才是本题精妙所在:求:$\sum\prod_{i=1}^{m}F_{a{i}}$ 设 $f(i)$ 为 $N=i$ 时的答案,$F_{i}$ 为斐波 ...

  3. python在leecode刷题-第一题和第七题

    class Solution(object): def twoSum(self, nums, target): """ :type nums: List[int] num ...

  4. 洛谷P1164 小A点菜 && caioj 1410 动态规划1：点菜（背包方案问题）

    方程很简单 f[0] = 1 f[j] += f[j-w[i]] #include<cstdio> #define REP(i, a, b) for(int i = (a); i < ...

  5. [JLOI2015]装备购买（线性基）

    [JLOI2015]装备购买 题目描述 脸哥最近在玩一款神奇的游戏,这个游戏里有 nn 件装备,每件装备有 \(m\) 个属性,用向量 \(\mathbf{z_i}\)=\((a_1, \ldots ...

  6. Unity C# 设计模式（一）单例模式

    动机(Motivation):    在软件系统中,经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例,才能确保它们的逻辑正确性.以及良好的效率 意图:    保证一个类仅有一个实例,并提供一 ...

  7. 移动端开发ios和安卓兼容问题

    移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的 ...

  8. Eclipse导出JavaDoc（并解决中文乱码问题）

    一. 使用Eclipse生成注释文档 使用eclipse生成文档(javadoc)主要有三种方法: 1,在项目列表中按右键,选择Export(导出),然后在Export(导出)对话框中选择java下的 ...

  9. linux 下查看二进制文件

    查看二进制有以下几种方法: 方法一:hexdump apt-get install libdata-hexdumper-perl 安装好之后就可以直接hexdump your_binary_file ...

  10. Scala具体解释---------Scala是什么？可伸展的语言！

    Scala是什么 Scala语言的名称来自于"可伸展的语言". 之所以这样命名,是由于他被设计成随着使用者的需求而成长.你能够把Scala应用在非常大范围的编程任务上.从写个小脚本 ...