基于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给对象新添加属性，一定要使用Vue.set( target, key, value )这个API来添加

    this.tagList = [{ id:1, tagName:'90后' }, { id:2, tagName:'土豪' }, { id:3, tagName:'美女' }, { id:4, tag ...

  2. 常用协议（SPI, UART, I2C）

    SPI: SPI是全双工的同步串行接口,数据速率可达几Mbps,在一般应用中有4根信号线:MOSI, MISO, SCK, SS. 根据时钟极性(CPOL)及相位(CPHA)不同可以组合成4种工作模式 ...

  3. 【Codeforces Round #299 (Div. 2) A】 Tavas and Nafas

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题 [代码] #include <bits/stdc++.h> using namespace std; map & ...

  4. NIO 入门（转）

    NIO 入门 Greg Travis2003 年 11 月 17 日发布 分享此页面 WeiboGoogle+用电子邮件发送本页面 20 在开始之前 关于本教程 新的输入/输出 (NIO) 库是在 J ...

  5. [Debug] Use Snippets to Store Behaviors in Chrome DevTools

    Using the Snippets tab in the source devtool you can define and run arbitrary pieces of code in your ...

  6. eclipse插件安装验证及问题处理

    eclipse插件安装验异常时可看当前workspace下面的.metadata/.log文件,找到具体的问题来处理.一般常用到插件安装不成功的原因如下: 1.jar包冲突: 2.jar包依赖的jav ...

  7. ZOJ 1494 Climbing Worm 数学水题

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=494 题目大意: 一只蜗牛要从爬上n英寸高的地方,他速度为u每分钟,他爬完u需要 ...

  8. 1、第一课 register_chrdev和register_chrdev_region 创建知识

    1. register_chrdev注册字符设备后,有0-256个子设备可用,若major==0,则内核动态申请主设备号.static inline int register_chrdev(unsig ...

  9. C#的Timer（很多相关文章）

    再C#里现在有3个Timer类: System.Windows.Forms.Timer System.Threading.Timer System.Timers.Timer 这三个Timer我想大家对 ...

  10. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...