## 基本使用：
1. 创建一个`VueRouter`对象：`new VueRouter()`。
2. 在`VueRouter`中，需要传递一个`routes`参数。这个参数是一个数组类型，数组中存储的是对象，对象中最少要有两个属性，一个是`path`，代表`url`，第二个是`component`，代表数据更新的组件。示例代码如下：
  ```js
  let router = new VueRouter({
      routes: [
        {path: "/",component: index},
        {path: "/find",component: find},
        {path: "/friend",component: friend}
      ]
    })
  ```
 
<!DOCTYPE html>

<html lang='en'>

<head>

 <meta charset='UTF-8'>

 <meta http-equiv='X-UA-Compatible' content='IE=edge'>

 <meta name='viewport' content='width=device-width, initial-scale=1.0'>

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

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

 <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

 <title></title>

</head>

<body>

 <div id='app'>

  <nav class="navbar navbar-default">

    <div class="container-fluid">

      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

          <span class="sr-only">Toggle navigation</span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

        </button>

        <a class="navbar-brand" href="#">网易云音乐</a>

      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav">

          <li>

            <router-link to="/">首页</router-link>

          </li>

          <li>

            <router-link to="/find">发现音乐</router-link>

          </li>

          <li>

            <router-link to="/friend">我的朋友</router-link>

          </li>

        </ul>

      </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

  </nav>

  <div class="container">

    <router-view></router-view>

  </div>

 </div>

 <script>

   var index = Vue.extend({template:"<h1>首页</h1>"})

   var find = Vue.extend({template:"<h1>发现音乐</h1>"})

   var friend = Vue.extend({template:"<h1>我的朋友</h1>"})

   let router = new VueRouter({

      routes:[

        {path:"/",component: index},

        {path:"/find",component: find},

        {path:"/friend",component: friend},

      ]

   })

    new Vue({

      el:'#app',

      router

    }

)

</script>

</body>

</html>

VueRouter学习01-基本使用的更多相关文章

  1. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  2. Java虚拟机JVM学习01 流程概述

    Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...

  3. Android Testing学习01 介绍 测试测什么 测试的类型

    Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...

  4. Java学习01

    Java学习01 第一章 1.JRE与JDK JDK(JAVA Develop Kit,JAVA开发工具包)提供了Java的开发环境和运行环境,主要用于开发JAVA程序,面向Java程序的开发者; J ...

  5. ThinkPhp学习01

    原文:ThinkPhp学习01 一.ThinkPHP的介绍           MVC  M - Model 模型                工作:负责数据的操作  V - View  视图(模板 ...

  6. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  7. JVM学习01：内存结构

    JVM学习01:内存结构 写在前面:本系列分享主要参考资料是  周志明老师的<深入理解Java虚拟机>第二版. 内存结构知识要点Xmind梳理 案例分析 分析1 package com.h ...

  8. webservice学习01：wsdl文档结构

    webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...

  9. spring学习(01)之IOC

    spring学习(01)之IOC IOC:控制反转——Spring通过一种称作控制反转(IOC)的技术促进了低耦合.当应用了IOC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创 ...

  10. vue学习01

    vue学习01   1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...

随机推荐

  1. signal 信号

    python学习笔记--信号模块signal 阅读目录(Content) 1 signal基本信号名 2 常用信号处理函数 2.1 设置发送SIGALRM信号的定时器 2.2 设置信号处理函数 3 常 ...

  2. Shell脚本--数值比较组合判断

    用于数值比较的无非大于.小于.等于.大于等于.小于等于这几个. 比较格式: [ 数值1 比较符 数值2 ]   注意左边的括号与数值1之间有一个空格,同样,数值2和右边的括号之间也有空格. 数值比较运 ...

  3. Linux生成SSH密钥对

    执行 ssh-keygen -t rsa -P "" -f "/root/.ssh/id_rsa" 进入 cd /root/.ssh目录 (这里的root 是因 ...

  4. IDEA推荐配置(自动导入包、提示不区分大小写)

    设置快捷键方式为eclipse 设置代码提示不区分大小写 自动导入包 可以通过 Ctrl + 鼠标滚轮 来控制代码字体大小显示 显示行号和显示区分方法线 代码一行显示不下,软分行显示,点击鼠标右键 增 ...

  5. 【LeetCode】455. Assign Cookies 解题报告（Java & Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 Java解法 Python解法 日期 [LeetCo ...

  6. 【LeetCode】243. Shortest Word Distance 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典 日期 题目地址:https://leetcode ...

  7. 【LeetCode】804. Unique Morse Code Words 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述: 题目大意 解题方法 set + map set + 字典 日期 题目地 ...

  8. 『动善时』JMeter基础 — 59、进行JMeter分布式测试遇到的坑

    目录 1.控制机端 (1)执行机没有关闭防火墙 (2)内存溢出 2.执行机端 (1)启动jmeter-server服务情况一 (2)启动jmeter-server服务情况二 (3)启动jmeter-s ...

  9. [开发配置]Linux系统配置开发环境

    deeplin系统配置开发环境 开发系统:deeplin 15.11 开发工具:Clion 2019.2 ; PyCharm 2019 ; Idea 2019;  Android Studio 开源库 ...

  10. MySQL创建数据库 easyShopping，包括area表、goods表、customer表、orders表、ordersdetall表、test表

    MySQL创建数据库 easyShopping,包括area表.goods表.customer表.orders表.ordersdetall表.test表 商品表表结构: 字段名 说 明 类 型 长 度 ...