1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>hello world</title>
  6.  </head>
  7.  <body>
  8.      <div id="app">
  9.          <div>
  10.              <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->
  11.              <router-link to="/home">Go to Home</router-link>
  12.              <router-link to="/about">Go to About</router-link>
  13.          </div>
  14.  
  15.          <!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 -->
  16.          <router-view></router-view>
  17.      </div>
  18.  
  19.      <!-- 0、引入依赖库（类库需要下载） -->
  20.      <script src="vue.min.js"></script>
  21.      <script src="vue-router.js"></script>
  22.  
  23.      <script type="text/javascript">
  24.          /* 1、创建组件 */
  25.          const Home = Vue.extend({
  26.              template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
  27.              data: function() {
  28.                  return {
  29.                      msg: 'Hello, vue router!'
  30.                  }
  31.              }
  32.          });
  33.          const About = Vue.extend({
  34.              template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
  35.          });
  36.  
  37.          // 2. 创建 router 实例，然后传 `routes`路由映射 配置
  38.          const router = new VueRouter({
  39.            routes: [
  40.              { path: '/home', component: Home },
  41.                { path: '/about', component: About },
  42.                { path: '/', component: Home } //设置默认路径
  43.             ]}
  44.             );
  45.  
  46.          // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
  47.          const vm = new Vue({
  48.                router: router
  49.          }).$mount('#app');
  50.  
  51.          // 现在，应用已经启动了！
  52.      </script>
  53.  </body>
  54.  </html>

vue路由简单实用的更多相关文章

  1. 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）

    其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...

  2. 简单配置Vue路由

    简单配置Vue路由 1.  创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...

  3. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

  4. Vue路由模块化的实现方法

    分享一个Vue路由模块化方法,简单实用,好用到飞起 路由模块化 1.router/index.js 配置路由 import Vue from 'vue' import VueRouter from ' ...

  5. Linux下好用的简单实用命令

    1.你是否为在输入了一大串命令之后发现第一个字符打错了而苦恼?只能删除重来嘛?或者一步步左移光标? NO,一个组合键轻松搞定 Ctrl+A -----到命令行首 Ctrl+E ------到命令行末 ...

  6. react构建淘票票webapp，及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  7. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  8. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  9. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

随机推荐

  1. BZOJ 4853 [Jsoi2016]飞机调度

    题解: 我严重怀疑语文水平(自己的和出题人的) 把航线按照拓扑关系建立DAG 然后最小路径覆盖 为什么两条首尾相接航线之间不用维护???? #include<iostream> #incl ...

  2. Java 二叉树深度 判断平衡二叉树

    package cookie; public class BTreeDepthIsBalanced { int depth(BNode head) { if (head == null) { retu ...

  3. C++使用 scanf函数

    最近看了下C++,有些地方和c语言 还是不太一样的,当我在做输入一个数字的时候发现了错误.. 所以在使用scanf()的时候需要加下面这段在头文件  顶部: #define _CRT_SECURE_N ...

  4. Django 初体验

    Django 依赖的python 基础环境安装: https://www.runoob.com/django/django-install.html Django安装参考官网文档: https://d ...

  5. 实验吧-密码学-变异凯撒(ascii码规律运算)

    密文是:afZ_r9VYfScOeO_UL^RWUc 刚开始很迷,不知道往什么方向,到最后才发现,原来和ASCII有关. 将flag{的ASCII码和密文的ASCII码对比: 97 102 90 95 ...

  6. [GXYCTF2019]BabyUpload

    0x00 知识点 文件类型绕过: Content-Type: image/jpeg apache环境下上传.hatcess 首先上传一个.htaccess内容如下的文件 :SetHandler app ...

  7. 2016蓝桥杯省赛C/C++A组第九题 密码脱落

    题意: X星球的考古学家发现了一批古代留下来的密码. 这些密码是由A.B.C.D 四种植物的种子串成的序列. 仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的镜像串). 由于年代久远,其中 ...

  8. EUI库 - EXML

        EXML是可以运行时加载解析的   <e:Skin class="skins.ButtonSkin" states="up,down,disabled&qu ...

  9. Egret Engine 2D - 项目配置

      todo 看三个示例项目的完整源码和资源     <e:Group name="Button" height = "300" verticalCent ...

  10. iPhone系统固若金汤，为何还有人偷苹果手机去卖？

    2016年初,美国FBI希望苹果开发软件用以解锁一部嫌疑人的iPhone.苹果虽然帮助FBI从疑犯iCloud账户中提取数据,但有些数据仍然不可获取.由于不知道手机密码,FBI也无法打开手机.虽然在最 ...