Vue Router的官方示例改造
基于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的官方示例改造的更多相关文章
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- ngRx 官方示例分析 - 3. reducers
上一篇:ngRx 官方示例分析 - 2. Action 管理 这里我们讨论 reducer. 如果你注意的话,会看到在不同的 Action 定义文件中,导出的 Action 类型名称都是 Action ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
随机推荐
- Android 解决RecyclerView删除Item导致位置错乱的问题
RecyclerView的刷新分为内容变化和结构变化,结构变化比如remove和insert等并不会导致viewholder的更新,所以有时候我们使用 notifyItemRemoved(positi ...
- Javascript和jquery事件--点击事件和触发超链接
前面的不过是一些基础的知识,真正的一些事件还是有点不同.还有一些命名空间的问题.不过现在ie也开始接受W3C标准,而且平时开发也很少考虑ie了,一些事件就不考虑ie了. 点击事件--click 大部分 ...
- js进阶 13-2 jquery动画滑动效果哪些注意事项
js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...
- JavaScript系列--JavaScript数组高阶函数reduce()方法详解及奇淫技巧
一.前言 reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. reduce()方 ...
- POJ 1932 XYZZY (ZOJ 1935)SPFA+floyd
http://poj.org/problem?id=1932 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1935 题目大 ...
- android请求
//请求 HttpURLConnection conn = (HttpURLConnection)new URL(path).openConnection(); conn.setConnecTimeo ...
- UIActionSheet用法
//上拉菜单 1 UIActionSheet* sheet = [[UIActionSheet alloc] initWithTitle:nil delegate:self cancelButtonT ...
- 【Codeforces Round #185 (Div. 2) C】The Closest Pair
[链接] 链接 [题意] 让你构造n个点,去hack一种求最近点对的算法. [题解] 让x相同. 那么那个剪枝就不会起作用了. [错的次数] 在这里输入错的次数 [反思] 在这里输入反思 [代码] # ...
- [Tools] Fix Only Committed Files with Prettier and lint-staged
In this lesson we'll use prettier and lint-staged to run prettier only on files that have been chang ...
- Yarn架构基本概况(一)
1)引言 针对MRv1在扩展性.可靠性,资源利用率和多框架的支持上存在着明显的不足.进而诞生了下一代的MapReduce的计算框架MapReduce Version2,MRV1中有一个非常大的问题就是 ...