1.首先在‘components’文件夹里面创建想要切换的路由。

2.在index.js文件里面引入地址并进行路由的注入。

3.使用<router-link to="path地址"></router-link>绑定路由。‘path地址’值得是index.js里面定义的地址。

4.在app.vue里面进行组件输出

5.路由绑定的效果图

vue2.0-router的绑定的更多相关文章

  1. vue2.0 $router和$route的区别

    在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数. 在路由跳转的时候除了用router-link标签以外需要 ...

  2. vue2.0中v-on绑定自定义事件

    vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...

  3. vue2.0中v-on绑定自定义事件的理解

    vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...

  4. Vue2.0 Props双向绑定报错简易处理办法

    在写项目的时候遇到了一个报错问题,虽然功能是正常运行,chrome的提示是:[Vue warn]: Avoid mutating a prop directly since the value wil ...

  5. Vue2.0实现双向绑定的原理

    一.几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input.textare等)添加了change(in ...

  6. vue2.0 双向绑定原理分析及简单实现

    Vue用了有一段时间了,每当有人问到Vue双向绑定是怎么回事的时候,总是不能给大家解释的很清楚,正好最近有时间把它梳理一下,让自己理解的更清楚,下次有人问我的时候,可以侃侃而谈. 一.首先介绍Obje ...

  7. Vue2.0 【第一季】第5节 v-on：绑定事件监听器

    目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...

  8. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  9. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  10. vue2.0有哪些变化

    vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...

随机推荐

  1. 26.Remove Duplicates from Sorted Array(Array)

    Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...

  2. Shiro01 功能点框图、架构图、身份认证逻辑、身份认证代码实现

    基本功能点 功能点框图 功能点说明 1.Authentication:身份认证/登录,验证用户是不是拥有相应的身份: 2.Authorization:授权,即权限验证,验证某个已认证的用户是否拥有某个 ...

  3. linux下mysql开启远程访问权限及防火墙开放3306端口（mysql开放host访问权限）

    开启mysql的远程访问权限默认mysql的用户是没有远程访问的权限的,因此当程序跟数据库不在同一台服务器上时,我们需要开启mysql的远程访问权限.主流的有两种方法,改表法和授权法.相对而言,改表法 ...

  4. a标签href="javascript:;"

    //点击a链接,执行一段js代码 <!DOCTYPE html> <html> <head> <title></title> </he ...

  5. CSS中float和Clear的使用

    CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...

  6. Scheduling the Delivery of Local Notifications

    [Scheduling the Delivery of Local Notifications] Apps can use local notifications to display alerts, ...

  7. IO多路复用原理

    (1)IO multiplexing(2)用在什么地方?多路非阻塞式IO.(3)select和poll(4)外部阻塞式,内部非阻塞式自动轮询多路阻塞式IO IO多路复用原理:其实就是整个函数对外表现为 ...

  8. JoinMap

    #include <iostream> #include <fstream> using namespace std; #include <opencv2/core/co ...

  9. 使用Nmap攻击靶机和使用Wireshark进行嗅探、分析

    使用Nmap攻击靶机和使用Wireshark进行嗅探.分析 在上一次课中已经对Nmap的使用.原理已经做了很多学习,这次的课更多地针对Wireshark进行学习和使用. 使用192.168.200.1 ...

  10. Spring AOP详解（转载）

    此前对于AOP的使用仅限于声明式事务,除此之外在实际开发中也没有遇到过与之相关的问题.最近项目中遇到了以下几点需求,仔细思考之后,觉得采用AOP 来解决.一方面是为了以更加灵活的方式来解决问题,另一方 ...