vue学习笔记（七）---- vue中的路由
一、什么是路由
- 对于普通的网站来说，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
- 对应单页面的应用程序来说，主要通过URL中的hash（#号）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容，所以，单页面的应用程序的页面跳转主要用hash来处理
- 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
二、vue-router的安装
官方文档：https://router.vuejs.org/zh/
安装
二、vue-router的基本使用
- 导入vue和 vue-router 组件类库
<script src="../lib/vue-2.6.10.js"></script>
<script src="../lib/vue-router-v3.0.1.js"></script>
- 使用 router-link 组件来导航
<!-- 表示路由链接， router-link 默认渲染为 a 标签 -->
<!-- tag=""可以更换默认标签-->
<router-link to="/login" tag="sapn">登录</router-link>
<router-link to="/reg">注册</router-link>
- 使用 router-view 组件来显示匹配到的组件
<!-- 路由的坑 ，将来用来把匹配到的组件，呈现到这个坑中 -->
<!-- router-view 默认不会被渲染为元素 -->
<router-view></router-view>
- 创建使用
Vue.extend创建组件
方式一：
var login = Vue.extend({
template: '<h3>登录组件</h3>'
});
var register = Vue.extend({
template: '<h3>注册组件</h3>'
});
方式二：
var login = {
template: '<h3>登录组件</h3>'
}
var reg = {
template: '<h3>注册组件</h3>'
}
- 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [ // 路由规则的数组
{ path: '/login', component: login },
// 路由规则 其中， path 表示要匹配的hash值，component 表示对应的hash要展示的 组件对象
{ path: '/reg', component: reg }
// 匹配到的路由组件，如果想要展示给用户，需要在页面上放 <router-view></router-view>
]
})
- 使用 router 属性来使用路由规则
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router : router
//简写成：
router
});
来吧展示：
三、路由匹配规则
点击路由标签，就会修改hash值，当hash值被修改了之后，会被路由规则监听到，如果能找到，就会根据最新的hash值找到路由组件，然后把组件渲染到页面上
所以总的来说就是先触发router-link，然后修改hash值，hash值改变了，就会被路由对象监听到，监听到之后匹配路由规则，然后找到对应的组件然后放到页面上展示
四、设置路由切换高亮效果
方式一：更改.router-link-active的样式
默认被选中的链接就会有这么一个类.router-link-active，这是官方提供的
<style>
.router-link-active {
color: red;
font-weight: bold;
font-style: italic;
font-size: 20px;
text-decoration: underline;
}
</style>
<body>
<div id="app">
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/reg" tag="span">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h3>登录组件</h3>'
}
var reg = {
template: '<h3>注册组件</h3>'
}
var router = new VueRouter({
routes: [
// { path: '/', component: login },
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/reg', component: reg }
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
</body>
来吧展示：
方式二：自定义样式取代 .router-link-active 的样式
.my-active {
color: orange;
font-size: 30px;
}
var router = new VueRouter({
routes: [
// { path: '/', component: login },
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/reg', component: reg }
],
linkActiveClass: 'my-active'
// 配置默认被 选中路由的高亮类名的 ， 默认类名为 router-link-active
})
来吧展示：
五、为路由的切换添加动画效果
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.3s ease;
position: absolute;
}
</style>
<transition>
<router-view></router-view>
</transition>
来吧展示：
六、路由传参
1.以 ？ 问号的方式传参
<router-link to="/login?id=10">登录</router-link>
<router-link to="/reg">注册</router-link>
在路由中使用？传参，不需要修改路由规则，不会影响路由链接的跳转
将 ？后面传递的 id值 展示在页面中
var login = {//组件也有自己的生命周期函数，这些函数，和 vm 实例的 生命周期函数一致
template: '<h3>登录组件</h3>',
//组件被创建完成后会调用created()函数
created(){//当 login 组件 中 data 和 methods 初始化完毕后，调用 created
console.log(this)
}
}
var login = {
template: '<h3>登录组件 ---- {{$route.query.id}} </h3>',
created(){
console.log(this)
console.log(this.$route.query.id)
}
}
2.以 / 斜杠的方式传参
<router-link to="/login/18/hui">登录</router-link>
<router-link to="/reg">注册</router-link>
以/ 斜杠方式传参要修改路由规则，表示传递的参数代表什么含义，如下：
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login/:age/:name', component: login },
{ path: '/reg', component: reg }
],
linkActiveClass: 'my-active'
})
var login = {
template: '<h3>登录组件 ---- {{$route.params.age}} ----- {{$route.params.name}}</h3>',
created(){
console.log(this)
}
}
七、路由中使用 props 传参
var login = {
props: ['age', 'name'],
template: '<h3>登录组件 ---- {{age}} ---- {{name}} </h3>',
//组件被创建完成后会调用created()函数
}
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login/:age/:name', component: login,props: true },
//将来匹配到的参数,可以直接通过props来接受
{ path: '/reg', component: reg }
],
linkActiveClass: 'my-active'
})
八、使用 children 属性实现路由嵌套
<div id="app">
<router-link to="/index">这是首页</router-link>
<router-link to="/news">这是新闻页</router-link>
<router-view></router-view>
</div>
<script>
var index = {
template:`<div class="index">
<h3>这是首页</h3>
<router-link to="/index/login">登录</router-link>
<router-view></router-view>
</div>`
//如果只是这样的话,点击登录救只能显示登录的组件,不能显示首页的组件
// 想要实现点击登录能显示首页又能显示登录页，需要使用children来实现路由的嵌套
}
var news = {
template:'<div class="news"><h3>这是新闻页</h3></div>'
}
var login = {
template:'<h3>登录</h3>'
}
var router = new VueRouter({
routes:[
{path:'/index',component:index,
children:[{path:'login',component:login}]},
// {path:'/index/login',component:login},
{path:'/news',component:news}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router
})
</script>
来吧展示：
九、命名视图的使用
<style>
html,
body,
h1 {
margin: 0;
padding: 0;
font-size: 20px;
}
.header {
height: 120px;
background-color: darkcyan;
}
.container {
height: 400px;
display: flex;
}
.sidebar {
background-color: orange;
flex: 2;
}
.content {
background-color: pink;
flex: 10;
}
.footer {
background-color: black;
color: white;
height: 100px;
}
</style>
<body>
<div id="app">
<!-- 路由的容器 -->
<router-view name="top"></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
<router-view name="bottom"></router-view>
</div>
<script>
const header = {
template: `<h1 class="header">头部区域</h1>`
}
const sidebar = {
template: `<h1 class="sidebar">左侧侧边栏</h1>`
}
const content = {
template: `<h1 class="content">主体内容区域</h1>`
}
const footer = {
template: `<h1 class="footer">尾部</h1>`
}
const router = new VueRouter({
routes: [
// { path: '/', component: header }
{
path: '/', components: {
// 组件名称 : 组件对象
'top': header,
'left': sidebar,
'right': content,
'bottom': footer
}
}
]
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
</body>
来吧展示：
vue学习笔记（七）---- vue中的路由的更多相关文章
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(七)组件
前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记：vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- Vue学习笔记七：Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...
- Vue学习笔记之Nodejs中的NPM使用
0x00 NPM是什么 简单的说,npm就是JavaScript的包管理工具.类似Java语法中的maven,gradle,python中的pip. 0x01 NPM安装 傻瓜式的安装. 第一步:打开 ...
- AntDesign vue学习笔记（三）嵌套路由使用
本项目目前结构如下 1.Login页面=>MainFrm页面=>MainFrm左部菜单,右边是显示区域可以切换子页面. 2.当点击左部菜单时,右边的子页面随着进行切换. 实现关键代码如下1 ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
随机推荐
- 【深入浅出 Yarn 架构与实现】1-1 设计理念与基本架构
一.Yarn 产生的背景 Hadoop2 之前是由 HDFS 和 MR 组成的,HDFS 负责存储,MR 负责计算. 一)MRv1 的问题 耦合度高:MR 中的 jobTracker 同时负责资源管理 ...
- Java函数式编程：三、流与函数式编程
本文是Java函数式编程的最后一篇,承接上文: Java函数式编程:一.函数式接口,lambda表达式和方法引用 Java函数式编程:二.高阶函数,闭包,函数组合以及柯里化 前面都是概念和铺垫,主要讲 ...
- 【题解】P7860 [COCI2015-2016#2] ARTUR
题面传送门 好题. 主要思路和另一位巨佬差不多,详细讲一下判断的部分. 解决思路: 首先考虑本题与拓扑排序有和关系.可以想到,某些棍子的先后移动顺序是有限制的.比如: 这里红色的必须比蓝色的先移动,因 ...
- golang实现一个简单的http代理
代理是网络中的一项重要的功能,其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站,对于客户端来说,代理扮演的是服务器的角色,接收请求报文,返回响应报文:对于web服务器来说,代理扮演 ...
- Spring学习笔记 - 第一章 - IoC（控制反转）、IoC容器、Bean的实例化与生命周期、DI（依赖注入）
Spring 学习笔记全系列传送门: 目录 1.学习概述 2.Spring相关概念 2.1 Spring概述 2.1.1 Spring能做的工作 2.1.2 重点学习的内容 2.1.3 Spring发 ...
- 重要内置函数、常见内置函数、可迭代对象、迭代器对象、for循环的本质、异常捕获处理
重要内置函数 #zip拉链 zip 函数是可以接收多个可迭代对象,然后把每个可迭代对象中的第i个元素组合在一起,形成一个新的迭代器,类型为元组. l1 = [11, 22, 33] l2 = ['a' ...
- MISC相关刷题记录迁移
- 【企业流行新数仓】Day02：DWS层（按日分区的宽表）、DWT层（全量累计表）、ADS层、总结
一.DWS层 1.概括 dwd层的数据,每日轻度聚合,建宽表 表名 粒度 dws_uv_detail_daycount 一个设备是一行 dws_user_action_daycount(只统计今天登录 ...
- 天坑，这样一个lambda随机取数据也有Bug
前几天,一位网友跟我说他编写的一段很简单的代码遇到了奇怪的Bug,他要达到的效果是从一个List中随机取出来一条数据,代码如下: 1 var random = new Random(); 2 var ...
- referer的反爬和爬虫下载视频
一.缘由 在梨视频等一些网站中会使用防盗链作为反爬的基础方法,这个反爬并不严重,只是平时的时候需要多加留意.此次实现对应链接中梨视频的下载. 二.代码实现 #1.拿到contid #2.拿到video ...