vue-router官网:传送门

  vue-router起步:传送门

  

  vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用

  单页应用:Single Page Application简称SPA,只有一个web页面的应用,用户与应用交互时,动态更新该页面的内容

  简单的来说,根据不同的url与数据,将他们都显示在同一个页面中,就可以称为是单页应用

  而控制页面跳转需要用路由

  vue-router下载:下载js,或使用npm install vue-router -S

  vue-router使用:

    定义组件

    配置路由

    创建路由对象

    注入路由

  Learn

    一、-vue-router路由的基本用法

  目录结构

  

  【每个demo下方都存有html源码】

一、-vue-router路由的基本用法

  使用 router-link 组件来导航、通过传入 `to` 属性指定链接、<router-link> 默认会被渲染成一个 `<a>` 标签

    <body>
<div id = "GaryId">
<!--router-link默认被渲染成一个a标签-->
<router-link to="/home">首页</router-link>
<router-link to="/foods">美食</router-link> <div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
</body>

  分四步使用vue-router

    <script>

        //1 定义组件
let Home = {
template : "<h2>首页</h2>"
}
let Foods = {
template : "<h2>美食</h2>"
} //2 配置路由 路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods
}
] // 3 创建路由对象
const myRouter = new VueRouter({
//routes : routes
routes : myRoutes
}); new Vue({
//4 注入路由 简写
router : myRouter
}).$mount("#GaryId")
</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id = "GaryId">
<!--router-link默认被渲染成一个a标签-->
<router-link to="/home">首页</router-link>
<router-link to="/foods">美食</router-link> <div>
<!--将数据显示在这里-->
<router-view></router-view>
</div>
</div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript" src="../js/vue-router.js" ></script>
<script> //1 定义组件
let Home = {
template : "<h2>首页</h2>"
}
let Foods = {
template : "<h2>美食</h2>"
} //2 配置路由 路由可能有多个
const myRoutes = [
{
path : "/home",
component : Home
},
{
path : "/foods",
component : Foods
}
] // 3 创建路由对象
const myRouter = new VueRouter({
//routes : routes
routes : myRoutes
}); new Vue({
//4 注入路由 简写
router : myRouter
}).$mount("#GaryId")
</script> </html>

Gary_vue-router.html

Vue_(Router路由)-vue-router路由的基本用法的更多相关文章

  1. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  2. 六、vue路由Vue Router

    一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  a ...

  3. 链接(跳转)<router-link> 和 路由实例Router

    <router-link>和<router-link>传入的对象参数中包含path路径.name命名路由.params路径参数.query ?查询,并且如果提供了 path,p ...

  4. vue(5)—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  5. VUE:路由

    VUE:路由 一.说明 1)官方提供的用来实现SPA的vue插件 2)github:https://github.com/vuejs/vue-router 3)中文文档:http://router.v ...

  6. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  7. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  8. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  9. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  10. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

随机推荐

  1. c++11 原生字符串字面值

    c++11 原生字符串字面值 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #in ...

  2. gitlab 搭建

     一.ubuntu搭建gitlab     1. 如果以前有安装过gitlab请根据以下步骤来删除 https://www.cnblogs.com/shansongxian/p/6678110.htm ...

  3. JDK + Tomcat 安装 + 制作自定义镜像【第 2 篇 Tomcat】

    [第 1 篇 JDK]:https://www.cnblogs.com/del88/p/11842387.html[第 2 篇 Tomcat]:https://www.cnblogs.com/del8 ...

  4. phpspider爬虫框架的使用

    这几天使用PHP的爬虫框架爬取了一些数据,发现还是挺方便的,先上爬虫框架的文档 phpspider框架文档 使用方法其实在文档中写的很清楚而且在demo中也有使用示例,这里放下我自己的代码做个笔记 & ...

  5. asp.net mvc4 学习1

    1 简介:微软在很早就看到了基于windows系统的web开发平台的需求,这时便开始提出自己的解决方案即微软的第一个基于web开发的平台ASP.再后来随着需求和性能的要求再2002年推出第二个解决方案 ...

  6. golang整数与小数间的加减乘除

    我们假设你需要 整数与小数一起进行运算,或者 整数除以整数 得到小数这种运算 如果你使用了decimal, 那么之后所有的运算你都必须使用decimal, 因为通过它计算出来的结果的类型统统为deci ...

  7. GitHub新手使用篇

    如何使用GitHub 未完结 目录: ISSUE总汇总: Issue1:GitHub的注册和使用? 答:(1)注册GitHub :https://github.com/.需要填用户名.邮箱.密码,值得 ...

  8. 计算机基础与python入门

    一.计算机.cpu与存储器 二.操作系统.编程语言及编写python.变量 三.数据类型.输入输出及基本运算 四.流程控制之if判断.while与for循环 一.计算机.cpu与存储器 1. 什么是编 ...

  9. 【Java基础 项目实例 -- Bank项目2】Account 和 customer 对象

    总结: customer.setAccount(account); //引用,日后的account 和 customer.getAccount()的结果始终一致 实验目的 扩展银行项目,添加一个 Cu ...

  10. Zookeeper与Kafka Kafka

    Zookeeper与Kafka Kafka Kafka SocketServer是基于Java NIO开发的,采用了Reactor的模式(已被大量实践证明非常高效,在Netty和Mina中广泛使用). ...