vue 路由组件不重新加载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div> <script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo<input type="text"></div>' }
const Bar = { template: '<div>bar<input type="text"></div>' } // 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
] // 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
}) // 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app') // 现在，应用已经启动了！
</script>
</body>
</html>
vue 路由组件不重新加载的更多相关文章
- Vue.js 子组件的异步加载及其生命周期控制
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
- Vue项目优化首屏加载速度
Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...
- vue单页应用首次加载太慢之性能优化
问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是 ...
- Vue性能优化之组件按需加载（以及一些常见的性能优化方法）
关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- Vue 路由组件
目录 组件数据局部化处理 路由逻辑跳转 组件传参 父传子 子传父 组件的生命周期钩子 路由传参 全家配置自定义 CSS 与 js 总结: 组件数据局部化处理 不管页面组件还是小组件,都可能会被多次复用 ...
- vue2 自定义全局组件（Loading加载效果）
vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- Vue生命周期钩子函数加载顺序的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
随机推荐
- Server-Side Rendering(服务端渲染)的优点与缺点
优点 1. SEO 客户端渲染,页面中只有初始的几个html容器,js生成内容填充到容器中,爬虫只能识别到初始的html容器,js生成的内容一般不会被识别,而服务端渲染直接给出html,爬虫可以识别到 ...
- mybatis学习（六）——参数处理
先总结一下,后面再一个个解释: 单个参数:直接使用#{参数名}进行取值,mybatis没做特殊处理,参数名可以随便写. 多个参数:使用#{param1},#{param2}取值 命名参数:通过@par ...
- eclipse中纯java配置log4j日志
1.新建java项目log4Test 2.新建目录lib,把log4j-1.2.9.jar包放入lib目录 3.右键工程,选择Properties->Java Build Path->Li ...
- select函数与stdio混用的不良后果 (转)
出自:http://www.cppblog.com/mysileng/archive/2013/01/15/197284.html 今天在看UNP6.5节,学习到了select与stdio混用的后果. ...
- ubuntu16.04下安装wine1.8.2
如果是amd64则需要执行这个: sudo dpkg --add-architecture i386 1 1 添加wine最新的源 sudo add-apt-repository ppa:wine/w ...
- NGINX白名单功能，ngx_http_limit_conn_module和ngx_http_limit_req_module值设置多少才合适呀？
要根据不同的应用慢慢学习测试? 我现在设置的10左右,看看再说吧... #增加限制规则,如果不能正常访问,则需要调节这两个值 -- #增加ip白名单功能 geo $whiteiplist { defa ...
- LibieOJ 6170 字母树 （Trie）
题目链接 字母树 (以每个点为根遍历,插入到trie中,统计答案即可)——SamZhang #include <bits/stdc++.h> using namespace std; #d ...
- git移除上一次的commit中误添加的文件
在使用git进行版本管理时,往往会出现一些误操作,比如将一些不加上传的文件放到了暂存区,即上传到了上一次commit中 比如: commit c134ab90ca7c4daf8bfa22e3ad706 ...
- 济南day1下午
下午 预:60+100+30 实:30+30+30 T1水题(water) T1写了二分图匹配 听说有70分,写挫了.... 正解:贪心,按长度排序, 对于第一幅牌里面的,在第二个里面,找一个长度小于 ...
- RabbitMQ 最常用的三大模式
目录 Direct 模式 Topic 模式 Fanout 模式 Direct 模式 所有发送到 Direct Exchange 的消息被转发到 RouteKey 中指定的 Queue. Direct ...