第七章 路由 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的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...
随机推荐
- 【VS开发】CListCtrl控件使用
为何调用了CListCtrl的InsertColumn却什么效果都没有?这个问题以前发现过,今天才清楚,那就是要把它的Style指定为LVS_REPORT. 具体做法如下: 假 ...
- vue加scoped后无法修改样式(无法修改element UI 样式)
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...
- poj1905 Expanding Rods(二分)
题目链接:https://vjudge.net/problem/POJ-1905 题意:有一根长len的木棍,加热了n度,长度会膨胀为len*(1+n*c),c为膨胀系数.现在把这根木棍夹在两堵墙之间 ...
- sqlserver中分页的方式
1.使用top进行: 1.select top 页大小 * from 表名where id not in(select top 页大小*(查询第几页-1) id from 表名 order by id ...
- Linux就该这么学——新手必须掌握的命令之打包压缩与搜索命令组
tar命令 用途 : 对文件进行打包或者解压 格式 : tar [选项] [文件] 表 tar命令的参数及作用 参数 作用 -c 创建压缩文件 -x 解开压缩文件 -t 查看压缩包内有哪些文件 -z ...
- SQL注入之DVWA平台测试mysql注入
今天主要针对mysql常用注入语句进行测试. 测试环境与工具: 测试平台:DVWA,下载地址:http://down.51cto.com/data/875088,也可下载metaspolit-tabl ...
- 【IntelliJ IDEA】从资源文件读取出来就中文乱码的解决方法
在application.properties资源文件中设置两个自定义的属性以及属性值: com.sxd.name = "德玛西亚" com.sxd.want = "王者 ...
- lua的数据类型
Lua 是动态(弱)类型的语言,它有一下几种数据结构: nil(空) nil 类型表示一种没有任何有效值,它只有一个值 -- nil,例如打印一个没有赋值的变量,便会输出一个 nil 值: print ...
- luogu题解 P3811 【【模板】乘法逆元】
upd--7.6 原线性求逆元代码有另一种更优写法 题目链接: https://www.luogu.org/problemnew/show/P3811 概念: 一想到JXOI 2018考场上忘记逆元怎 ...
- css3常用样式
.box{ //改变轴的方向 flex-direction:column; //两端对齐 justify-content:space-between; //换行 flex-wrap: wrap; // ...