<!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 路由组件不重新加载的更多相关文章

  1. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...

  2. Vue项目优化首屏加载速度

    Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...

  3. vue单页应用首次加载太慢之性能优化

    问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是 ...

  4. Vue性能优化之组件按需加载（以及一些常见的性能优化方法）

    关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...

  5. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  6. Vue 路由组件

    目录 组件数据局部化处理 路由逻辑跳转 组件传参 父传子 子传父 组件的生命周期钩子 路由传参 全家配置自定义 CSS 与 js 总结: 组件数据局部化处理 不管页面组件还是小组件,都可能会被多次复用 ...

  7. vue2 自定义全局组件（Loading加载效果）

    vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...

  8. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  9. Vue生命周期钩子函数加载顺序的理解

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

随机推荐

  1. Dango notes II: class-based views

    A view is a callable which takes a request and returns a response. A view can be function (function- ...

  2. Educational Codeforces Round 10——B. z-sort

    B. z-sort time limit per test 1 second memory limit per test 256 megabytes input standard input outp ...

  3. UVa——1593Alignment of Code（string重定向+vector数组）

    UVA - 1593 Alignment of Code Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & ...

  4. [luoguP2770] 航空路线问题（最小费用最大流）

    传送门 模型 求最长两条不相交路径,用最大费用最大流解决. 实现 为了限制经过次数,将每个点i拆成xi,yi. 1.从xi向yi连一条容量为1,费用为1的有向边(1<i<N), 2.从x1 ...

  5. 从实际案例聊聊Java应用的GC优化

    转自美团点评技术博客:https://tech.meituan.com/jvm_optimize.html 当Java程序性能达不到既定目标,且其他优化手段都已经穷尽时,通常需要调整垃圾回收器来进一步 ...

  6. bzoj 2437[Noi2011]兔兔与蛋蛋 黑白染色二分图+博弈+匈牙利新姿势

    noi2011 兔兔与蛋蛋 题目大意 直接看原题吧 就是\(n*m\)的格子上有一些白棋和一些黑棋和唯一一个空格 兔兔先手,蛋蛋后手 兔兔要把与空格相邻的其中一个白棋移到空格里 蛋蛋要把与空格相邻的其 ...

  7. 【Tyvj2133&BZOJ1146】网络管理Network（树套树，DFS序，树状数组，主席树，树上差分）

    题意:有一棵N个点的树,每个点有一个点权a[i],要求在线实现以下操作: 1:将X号点的点权修改为Y 2:查询X到Y的路径上第K大的点权 n,q<=80000 a[i]<=10^8 思路: ...

  8. css选择器浅谈

    css选择器有很多,种类的话总结起来有5种.即: id选择器,class选择器,elements选择器,级联选择器,相邻选择器. 前三个没什么好说的,分别是id,class和标签的选择,注意选中对象的 ...

  9. Notepad++中常用的插件【转】

    转自:http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/htmls/npp_common_plugins.html 1.4. N ...

  10. HDU 4405： Aeroplane chess

    类型:概率DP 题意:一条直线下飞行棋,色子六个面等概率.同时存在一些飞机航线,到了某个点可以直接飞到后面的另一个点,可以连飞,保证一个点至多一条航线.求到达或者超过终点 所需要 掷色子的期望次数. ...