1.  <body>
  2.      <div id="itany">
  3.          <div>
  4.              <!--使用router-link组件来定义导航，to属性指定链接url-->
  5.              <router-link to="/home">主页</router-link>
  6.              <router-link to="/news">新闻</router-link>
  7.          </div>
  8.          <!--router-view用来显示路由内容-->
  9.          <router-view></router-view>
  10.      </div>
  11.  </body>
  12.  </html>
  13.  <script>
  14.      // 1.定义组件
  15.      var Home={
  16.          template:'<h3>我是主页</h3>'
  17.      }
  18.      var News={
  19.          template:'<h3>我是新闻</h3>'
  20.      }
  21.      // 2.配置路由
  22.      const routes=[
  23.          {path:'/home',component:Home},
  24.          {path:'/news',component:News},
  25.          {path:'*',redirect:'/home'}//重定向，即默认的情况下打来home组件；
  26.      ]
  27.      // 3.创建路由实例
  28.      const router=new VueRouter({
  29.          routes,
  30.          linkActiveClass:'active'//更新活动链接的class类名
  31.      });
  32.      // 4.创建根实例并将路由挂载到vue实例上
  33.      new Vue({
  34.          el:'#itany',
  35.          router//注入路由
  36.  
  37.      })
  38.  </script>

vue路由使用的更多相关文章

  1. Vue路由vue-router

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

  2. 攻克vue路由

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

  3. Vue路由学习心得

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

  4. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  5. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  6. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  7. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  8. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  9. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  10. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

随机推荐

  1. cmake处理多源文件目录的方法

    cmake处理源代码分布在不同目录中的情况也很简单,现在假设我们的源代码分布情况如下: 源代码的分布情况 其中src目录下的文件要编译成一个链接库 第一步,项目主目录中的CMakelist.txt 在 ...

  2. Windows最常用的8个网络CMD命令总结

    一,ping 它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的:网络上的机器都有唯一确定的IP ...

  3. android APK反编译及代码混淆

    反编译.查看源代码,需要用到两个工具:dex2jar 和 jdgui dex2jar(google code) jdgui(google code),最新版本请见 官方 操作很简单,步骤如下: 1.将 ...

  4. 突破防盗链机制：使用referrer-killer

    在开发it博客汇的过程中遇到一个难题:很多图片链接设置了防盗链机制,从我的网站请求图片会返回403错误,但直接在浏览器中打开图片的url时却又正常. 使用fiddler抓包发现,从我的网站请求图片会带 ...

  5. WindowProc和DefWindowProc的差别

    1. WindowProc是你给自己的窗体定义的窗体处理函数 DefWindowProc是windows平台提供的默认窗体处理函数 假设某些消息你不须要做特别的处理,调用DefWindowProc进行 ...

  6. java实现折半排序算法

    折半插入排序法,又称二分插入排序法,是直接插入排序法的改良版,也需要执行i-1趟插入,不同之处在于,第i趟插入,先找出第i+1个元素应该插入的的位置,假定前i个数据是已经处于有序状态. 折半插入排序( ...

  7. 如何在网页中嵌入QQ 阿里旺旺等代码

    1 登陆以下网址: http://wp.qq.com/login.html?target=1 2 复制代码到HTML中即可 3 将对方和自己的QQ都登陆测试(注意自己QQ必须是2010以上版本,否则会 ...

  8. LinkedIn架构这十年

    原文: A Brief History of Scaling LinkedIn 2003年是LinkedIn元年,公司成立的目标是连接你的个人人脉以获得更好的的工作机会.上线第一周才有2700个会员注 ...

  9. SOA服务总线设计

    背景 基于总线的设计,借鉴了计算机内部硬件组成的设计思想(通过总线传输数据).在分布式系统中,不同子系统之间需要实现相互通信和远程调用,比较直接的方式就是“点对点”的通信方式,但是这样会暴露出一些很明 ...

  10. ios开发杂项(基础性介绍等）

    IOS Xcode开发中的文件后缀名区别m,mm,cpp,h .h :头文件.头文件包含类,类型,函数和常数的声明. .m :源代码文件.这是典型的源代码文件扩展名,可以包含Objective-C和C ...