在我们平时工作中，我们有时候会有需求，按照不同的规则，加载不同的组件，页面不去跳转，常见的操作是ajax的异步操作，实现局部刷新加载新数据

在vue中，我们写了很多不同的组件，这时候，实现不刷新调用新组件，vue为我们提供了非常好用的一个插件，那就是路由

vue-router

我们首先去安装路由

在工具管理器里面我们直接敲命令

npm install vue-router --save

有些同学可能一开始不知道npm是什么东西，那么我们可以去下载vue-router文件到页面中去，像jquery一样引进就可以

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8" />

  <title>Document</title>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 </head>

 <body>

     <div id="app">

           <!-- 使用 router-link 组件来导航. -->

        <!-- 通过传入 `to` 属性指定链接. -->

        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

         <router-link to="/foo">1</router-link>

        <router-link to="/bar">2</router-link>

        <!-- 路由匹配到的组件将渲染在这里 -->

        <router-view></router-view>

     </div>

 </body>

 <script>

     // 1. 定义（路由）组件。

    // 可以从其他文件 import 进来

    const Foo = { template: '<div>foo</div>' }

    const Bar = { template: '<div>bar</div>' }

    // 2. 定义路由

    // 每个路由应该映射一个组件。

    let routes=[

        {

            path:'/foo',

            component:Foo

        },

        {

            path:'/bar',

            component:Bar

        }

    ]

    // 3. 创建 router 实例，然后传 `routes` 配置

     let router = new VueRouter({

        routes

    });

    // 4. 创建和挂载根实例。

    const app=new Vue({

      router

    }).$mount('#app');

 </script>

</html>

vue.js中的路由vue-router2.0使用的更多相关文章

  1. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  2. vue.js（20）--vue路由

    后端路由 对于普通的网站,所有的超链接都是url地址,所有的url地址都对应着服务器上的资源 前端路由 对于单页面应用程序来说,主要通过单页面中的hash(#)来进行页面的切换.hash的特点是htt ...

  3. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  4. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  5. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  6. 说说 Vue.js 中的 v-cloak 指令

    可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...

  7. Vue.js 中的 v-cloak 指令

    可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...

  8. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  9. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

随机推荐

  1. array_column() 函数[二维数组转为一维数组]

    array_column() 函数 输出数组中某个键值的集合[二维数组转为一位数组] <?php // 表示由数据库返回的可能记录集的数组 $a = array( array( 'id' =&g ...

  2. 为什么前后端分离不利于seo

    搜索引擎的基础爬虫的原理就是抓取你的url,然后获取你的html源代码并解析. 而你的页面通常用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是你的模型页面而不是最终数据的渲染页面, ...

  3. [Code+#1]大吉大利，晚上吃鸡！

    输入输出样例 输入样例#1: 7 7 1 7 1 2 2 2 4 2 4 6 2 6 7 2 1 3 2 3 5 4 5 7 2 输出样例#1: 6 输入样例#2: 5 5 1 4 1 2 1 1 3 ...

  4. SQL数据库基础————委托

    委托:也称为代理,事件也是一种委托:定义在类的最外面 1.定义委托关键字:delegate函数签名:签名和函数保持一致定义委托的时候要根据函数来定义public delegate int First( ...

  5. Angular JS (2)

    通过Angular JS的官方教学文档,了解 routeProvider 的用法, angular.module('aaa').config(['$locationProvider','$routeP ...

  6. web测试--登录界面怎么测？

    具体需求: 有一个登陆页面, 上面有2个textbox, 一个提交按钮.  请针对这个页面设计30个以上的测试用例. 此题的考察目的: 面试者是否熟悉各种测试方法,是否有丰富的Web测试经验, 是否了 ...

  7. NX自动出图 （更新啦）

    1.创建模板类零件图纸 2.创建顶针类零件图纸 3.创建镶件类零件图纸 4.自动创建孔表

  8. python学习笔记(3)——进制符号&转换公式

    进制转换法则: 进制符号  bin().oct().hex().int('',进制)+待转格式数 10进制→其他进制 # dec2bin # 十进制 to 二进制: bin() >>> ...

  9. canvas一周一练 -- canvas绘制饼图（3）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  10. oracle数据库过期

    本文转载自http://soft.chinabyte.com/database/6/12320006.shtml[来源:比特网 作者:悠虎] 由于Oracle11G的新特性所致,经常会遇到使用sqlp ...