<body>

     <div id="itany">

         <div>

             <!--使用router-link组件来定义导航，to属性指定链接url-->

             <router-link to="/home">主页</router-link>

             <router-link to="/news">新闻</router-link>

         </div>

         <!--router-view用来显示路由内容-->

         <router-view></router-view>

     </div>

 </body>

 </html>

 <script>

     // 1.定义组件

     var Home={

         template:'<h3>我是主页</h3>'

     }

     var News={

         template:'<h3>我是新闻</h3>'

     }

     // 2.配置路由

     const routes=[

         {path:'/home',component:Home},

         {path:'/news',component:News},

         {path:'*',redirect:'/home'}//重定向，即默认的情况下打来home组件；

     ]

     // 3.创建路由实例

     const router=new VueRouter({

         routes,

         linkActiveClass:'active'//更新活动链接的class类名

     });

     // 4.创建根实例并将路由挂载到vue实例上

     new Vue({

         el:'#itany',

         router//注入路由

     })

 </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. [Android Memory] 内存分析工具 MAT 的使用

    转载自: http://blog.csdn.net/aaa2832/article/details/19419679 1 内存泄漏的排查方法 Dalvik Debug Monitor Server ( ...

  2. iOS: 设置App的国际化和本地化

    原文链接:http://www.cocoachina.com/appstore/20160310/15632.html 前言 App的名字设置方式有很多种,如果在App打包上线时不做修改,最终App的 ...

  3. TCP-滑动窗口概念

    参考博客: http://blog.chinaunix.net/uid-26275986-id-4109679.html

  4. RenderMonkey 练习 第三天 【OpenGL renderToTexture】

    渲染到纹理: 1. 新建一个OpenGL 空effect; 2. 添加渲染目标纹理, Add Texture-> Add Render Texture 3. 添加一个渲染pass 4. 将pas ...

  5. Spark2-对于Null/Nan的处理

    一.几种查找空值的方法 1.Column方法 column.isNull/column.isNotNull/column.isNaN 2.类sql方法 二.na方法 2.1 na.drop方法 2.1 ...

  6. [Angular] AfterContentChecked && AfterViewChecked

    AfterContentChecked & AfterViewChecked are called after 'OnChanges' lifecycle. And each time 'ng ...

  7. 帮助更语义化的显示时间的jQuery插件 - tidyTime.js

    来源:GBin1.com 网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢? 08:15  显示成 ...

  8. 2014面试总结--java、数据 方向

    这里不讲详细的题目.仅仅是总结一下体会. 好一点的公司考察的都比較全面,主要看你对原理性的理解.还有你的思维逻辑:就眼下来讲,对深度的考察大于广度.而我个人如今这个阶段也比較专注于深度. 列一些常常问 ...

  9. JMeter 十一：参数化

    Test Plan中定义变量 打开测试计划,在用户定义的变量中定义变量. 这里定义了一个HOST变量,值为“www.baidu.com”. 之后就可以使用 ${HOST} 来引用这个变量. User ...

  10. 关于new String(new byte[]{0})

    今天在做Zxing的二维码的时候,返回的数据竟然是这个样子,郁闷了一小会,说明我用的这个控件有改进的空间.由于时间的原因,最后还是把这个返回的字符串重新组装. Bundle bundle = data ...