基于Vue Router 2018年8月的官方文档示例，改造一下，通过一个最简单的例子，解决很多初学者的一个困惑。

　　首先是官方文档示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app">

      <h1>Hello App!</h1>

      <p>

        <router-link to="/foo">Go to Foo</router-link>

        <router-link to="/bar">Go to Bar</router-link>

      </p>

      <router-view></router-view>

    </div>

    <script src="vue.js"></script>

    <script src="vue-router.js"></script>

    <script>

        const Foo = { template: '<div>foo</div>' }

        const Bar = { template: '<div>bar</div>' }

        const routes = [

          { path: '/foo', component: Foo },

          { path: '/bar', component: Bar }

        ]

        const router = new VueRouter({

          routes

        })

        const app = new Vue({

          router

        }).$mount('#app')

    </script>

</body>

</html>

　　效果如下

　　但此时，你点击子组件路由链接，会发现进入新路由后，页面外层的'Hello App!'等文字等仍然都在。不想要这些东西该怎么办？

　　其实这个很好办，先看咱们的新代码

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app">

      <router-view></router-view>

    </div>

    <script src="vue.js"></script>

    <script src="vue-router.js"></script>

    <script>

        const Index = { template: '<div>index <router-link to="/foo">Go to Foo</router-link></div>' }

        const Foo = { template: '<div>foo <router-link to="/bar">Go to Bar</router-link></div>' }

        const Bar = { template: '<div>bar</div>' }

        const routes = [

          { path: '/', component: Index },

          { path: '/foo', component: Foo },

          { path: '/bar', component: Bar }

        ]

        const router = new VueRouter({

          routes

        })

        const app = new Vue({

          router

        }).$mount('#app')

    </script>

</body>

</html>

效果如下

　　关键点就是在写路由对象的时候，多写一个‘/’路径，这个路径对应咱们的首页组件，在这个首页组件里写跳转路由链接，另外就是在Vue示例挂载DOM里（这里是#app），我们只写一个<router-view></router-view>，用来渲染各个路由组件，

这样首页内容渲染的是首页组件的，其他页面也不会有多余的‘Hello App’显示在路由组件渲染后的页面上了。

Vue Router的官方示例改造的更多相关文章

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

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

  2. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

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

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

  4. 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  5. ngRx 官方示例分析 - 3. reducers

    上一篇:ngRx 官方示例分析 - 2. Action 管理 这里我们讨论 reducer. 如果你注意的话,会看到在不同的 Action 定义文件中,导出的 Action 类型名称都是 Action ...

  6. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  7. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  8. python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  9. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

随机推荐

  1. vue 图片lazyload

    今天看到我一醉哥的一篇朋友圈分享:<不如我们从头来过 | 掘金> 看完之后,百感交集,互联网的浪潮使创业公司如雨后春笋般崛起, 每一个初创公司都会有一群怀着美好愿景的小伙伴, 但是当寒冬来 ...

  2. (转)oracle常用的数据字典

    一.oracle数据字典主要由以下几种视图构成: .user视图 以user_为前缀,用来记录用户对象的信息 .all视图 以all_为前缀,用来记录用户对象的信息及被授权访问的对象信息 .dba视图 ...

  3. 【Codeforces Round #433 (Div. 1) B】Jury Meeting

    [链接]h在这里写链接 [题意] 有n个人,它们都要在某一时刻开始,全都到达0位置,然后维持最少k个时间单位,然后再全都回到原来的位置; 第i个人初始的位置是i. 且一共有m班航班. 每一班航班,要么 ...

  4. UvaLive 6663 Count the Regions 离散化+DFS

    链接:http://vjudge.net/problem/viewProblem.action?id=49408 题意:在平面内给出若干个矩形,求出它们能将整个平面分成多少份. 思路:刚開始一眼看到认 ...

  5. iOS开发 - Quartz2D画图

    Quartz 2D简单介绍 是一个二维画图引擎,同一时候支持iOS和Mac系统 Quartz 2D能完毕的工作 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成 ...

  6. php 面试题一（看视频的学习量比网上瞎转悠要清晰和明了很多）（看视频做好笔记）（注重复习）

    php 面试题一(看视频的学习量比网上瞎转悠要清晰和明了很多)(看视频做好笔记)(注重复习) 一.总结 1.无线分类的本质是树(数据结构)(数的话有多种储存结构可以实现,所以对应的算法也有很多),想到 ...

  7. Android系统开发（5）——Eclipse for C/C++

    一.下载JDK 官方下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 二 ...

  8. 【u237】分数化小数

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 写一个程序,输入一个形如N/D的分数(N是分子,D是分母),输出它的小数形式.如果小数有循环节的话,把 ...

  9. 对延时敏感的应用是否应该使用Docker?

    在High Scalability上看到一篇文章 How Does The Use of Docker Effect Latency? .文章回答了一个问题 I keep hearing about ...

  10. 解决Eclipse中文乱码 分类： B1_JAVA 2014-06-25 11:23 336人阅读 评论(0) 收藏

    使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题,Eclipse提供了灵活的设置文件编码格式的选项,我们可以通过设置编码 格式解决乱码问题.在Eclipse可以从几个层面设置编 ...