## 基本使用:
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. JAVA生成订单编号工具类

    JAVA根据时间戳和随机数方式生成订单编号工具类 OrderUtils.java package com.util; import java.text.DateFormat; import java. ...

  2. 【LeetCode】163. Missing Ranges 解题报告 (C++)

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

  3. 【LeetCode】973. K Closest Points to Origin 解题报告(Python)

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

  4. 【LeetCode】713. Subarray Product Less Than K 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/subarray ...

  5. 在线编辑Word——插入图片、图形

    在Word中支持插入图片.图形等元素,同时支持对插入的图片和图形进行格式化操作,如裁剪.调整尺寸大小.调成颜色.阴影.倾斜角度.透明度等等.本文,将通过使用Spire.Cloud Word在线编辑器来 ...

  6. HDU 4790:Just Random(容斥)

    Just Random Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  7. 洛谷 P2397:yyy loves Maths VI (mode)(摩尔投票算法)

    题目背景 自动上次redbag用加法好好的刁难过了yyy同学以后,yyy十分愤怒.他还击给了redbag一题,但是这题他惊讶的发现自己居然也不会,所以只好找你 题目描述 [h1]udp2:第一题因为语 ...

  8. Codeforces 1113C: Sasha and a Bit of Relax(位运算|异或)

    time limit per test: 1 secondmemory limit per test: 256 megabytesinput: standard inputoutput: standa ...

  9. Go package(3):io包介绍和使用

    IO 操作的基本分类 在计算机中,处理文件和网络通讯等,都需要进行 IO 操作,IO 即是 input/ouput,计算机的输入输出操作. Go语言中的 IO 操作封装在如下几个包中: io 为 IO ...

  10. NeRF: Representing Scenes as Neural Radiance Fields for View Synthesis

    目录 概 主要内容 positional encoding 额外的细节 代码 Mildenhall B., Srinivasan P. P., Tancik M., Barron J. T., Ram ...