第七章 路由 71 路由-router-link的使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 安装 vue-router 路由模块 -->
<script src="../lib/vue-router-3.0.6.js"></script>
</head> <body>
<div id="app">
<!-- <a href="#/login">登录</a>
<a href="#/register">注册</a> --> <!-- router-link 默认渲染为一个a标签， 也可以通过tag设置渲染为其他的标签，例：tag="span"渲染为一个span标签。使用router-link就可以不用手动加“#”，这里推荐使用这种方式-->
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link> <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view中去 -->
<!-- 所以：我们可以把router-view 认为是一个占位符 -->
<router-view></router-view>
</div> <script>
//组件的模板对象
var login={
template:'<h1>登录组件</h1>'
} var register={
template:'<h1>注册组件</h1>'
} /*Vue.component('login',{
template: '<h1>登录组件</h1>'
})*/ //2.创建一个路由对象，当导入vue-router 包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
//在 new 路由对象的时候，可以为 构造函数，传递一个配合对象
var routerObj=new VueRouter({
//route //这个配置对象中的route表示 【路由匹配规则】 的意思
routes:[//路由匹配规则
//每个路由规则，则都是一个对象，这个规则对象，身上，有两个必须的属性：
// 属性1 是path, 表示监听 哪个路由链接地址；
// 属性2 是component,表示，如果 路由是前面匹配到的path，则展示component属性对应的哪个组件
//注意：component 的属性值，必须是一个组件的模板对象，不能是 组件的引用名称；
{path:'/login',component:login},
{path:'/register',component:register}
]
}) //创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
msg:''
},
methods:{},
router:routerObj //将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
});
</script>
</body>
</html>
第七章 路由 71 路由-router-link的使用的更多相关文章
- Web前端框架与移动应用开发第七章
1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...
- ThinkPHP5.0框架开发--第4章 TP5.0路由
ThinkPHP5.0框架开发--第4章 TP5.0路由 第4章 TP5.0 路由 ================================================== 上次复习 1. ...
- ASP.NET Core的路由[3]：Router的创建者——RouteBuilder
在<注册URL模式与HttpHandler的映射关系>演示的实例中,我们总是利用一个RouteBuilder对象来为RouterMiddleware中间件创建所需的Router对象,接下来 ...
- 前端笔记之React（七）redux-saga&Dva&路由
一.redux-saga解决异步 redux-thunk 和 redux-saga 使用redux它们是必选的,二选一,它们两个都可以很好的实现一些复杂情况下redux,本质都是为了解决异步actio ...
- vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )
一.路由的配置 路由 vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...
- Vue_(Router路由)-vue-router路由的基本用法
vue-router官网:传送门 vue-router起步:传送门 vue-router路由:Vue.js官网推出的路由管理器,方便的构建单页应用 单页应用:Single Page Applicati ...
- Vue.js 第4章 组件与路由
组件 什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式 一个组件中一般可以设置:结构,功能和样式 为什么要使用组件: 使用方便 复用 组件的创建和使用 组件的 ...
- 第七节：Vuejs路由交互及后台系统路由案例
一. 简介 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系 ...
- Vue实战狗尾草博客后台管理系统第七章
Vue实战狗尾草博客后台管理平台第七章 本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...
随机推荐
- ZOJ Problem Set - 1002
参考: 1.http://www.cnblogs.com/phinecos/archive/2008/09/18/1293017.html 基本思想:回溯法 重点在void Solve(int k,i ...
- airflow原理
官网: http://airflow.apache.org/installation.html 原理: https://www.cnblogs.com/cord/p/9450910.html 原理介绍 ...
- poco编译与运行
1.引言 Poco C++库是: 一系列C++类库,类似Java类库,.Net框架,Apple的Cocoa; 侧重于互联网时代的网络应用程序 使用高效的,现代的标准ANSI/ISO C++,并基于ST ...
- SQL 查看某个表被哪些存储过程或者视图使用
--查询某个表被哪些视图/存储过程使用(type='P':表示存储过程,type='V':表示视图) SELECT OBJECT_NAME(id) FROM syscomments WHERE id ...
- Oracle如何创建索引、删除索引、查询索引
1.创建单一索引 create index 索引名称 on 表名(列名); 2.创建复合索引 create index 索引名称 on 表名(列名1,列名2); 3.删除索引 drop index 索 ...
- Linux系列：进阶之tomcat安装
思路:作者是在Windows上从Apache官网下载的tomcat,之后将tomcat文件放到我的ftp站点中,在Linux访问ftp站点下载tomcat文件 ,将tomcat放在我自己的安装目录中, ...
- TCP的粘包、半包和Netty的处理
参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! 什么是粘包和半包 在客户端发送数据时,实际是把数据写入到了TCP发送 ...
- url编码问题小计
昨天通过get访问服务器遇到了服务器获取不到参数的问题,最后排查下来是因为url编码的原因,之前使用的是字符串拼接,所以有一些特殊字符如‘%’没有正确的编码, 通过改成各个部分编码,正确获取到数据. ...
- 并不对劲的复健训练-p5212 SubString
题目大意 有一个串\(s\),一开始只知道它的一个前缀.有\(q\)(\(q\leq 10^4\))个操作,操作有两种:1.给一个字符串,表示\(s\)(\(s\)总长\(\leq 6\times 1 ...
- C Looooops
看了半天的同余 扩展欧几里得 练练手 C Looooops Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 27079 A ...