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 ...
随机推荐
- 自动化运维？看看Python怎样完成自动任务调度⛵
作者:韩信子@ShowMeAI Python3◉技能提升系列:https://www.showmeai.tech/tutorials/56 本文地址:https://www.showmeai.tech ...
- 图机器学习(GML)&图神经网络(GNN)原理和代码实现(前置学习系列二）
项目链接:https://aistudio.baidu.com/aistudio/projectdetail/4990947?contributionType=1 欢迎fork欢迎三连!文章篇幅有限, ...
- 如何通过Java导出带格式的 Excel 数据到 Word 表格
在Word中制作报表时,我们经常需要将Excel中的数据复制粘贴到Word中,这样则可以直接在Word文档中查看数据而无需打开另一个Excel文件.但是如果表格比较长,内容就会存在一定程度的丢失,无法 ...
- vue项目中，alert使用
methods:{ sendData() { ··· // 中间省略的代码 alert(`发送成功,连接失败的号码有:${failList}`) // failList里存的是后台返回的数据 } }
- EntityUtils MapStruct BeanCopier 数据实体类转换工具 DO BO VO DTO 附视频
一.序言 在实际项目开发过程中,总有数据实体类互相转换的需求,DO.BO.VO.DTO等数据模型转换经常发生.今天推荐几个好用的实体类转换工具,分别是EntityUtils MapStruct Bea ...
- C++ 动态规划:一维动态规划，背包问题，区间动态规划
C++ 动态规划 动态规划的定义 动态规划(Dynamic Programming,DP)是运筹学的一个分支,是求解决策过程最优化的过程.动态规划是一种在数学.管理科学.计算机科学.经济学和生物信息学 ...
- python(牛客)试题解析3 - 困难
导航 一.找到已经最大承重的背包内如何放入最大价值的物品的最优解 二.查找一个字符串中包含另外一个字符串(可打乱顺序)的次数三.计算正整数数组从头走到最后一个成员所需的最小步骤四.计算字符串非严格递增 ...
- CSS伪类使用详解
基本描述 CSS伪类是很常用的功能,主要应用于选择器的关键字,用来改变被选择元素的特殊状态下的样式. 伪类类似于普通CSS类的用法,是对CSS选择器的一种扩展,增强选择器的功能. 目前可用的伪类有大概 ...
- 【知识体系】Kafka文档汇总、组成及架构，配置，常见名词解释，命令行及api操作，官方文档内容，各部分深入，zookeeper和security，监控和运维
〇.相关资料 1.快速搭建文档: 2.详细讲义 3.在线官方文档:http://kafka.apache.org/documentation/ 4.Kafka知识个人总结 5.KafkaPPT汇报 链 ...
- 详记apache-poi的使用，将word,excel,ppt转换为html
原文:https://blog.51cto.com/yunyaniu/5210961 java:Java的jar包之POI的简介.安装.使用方法(基于POI的转换-Word.Excel.Ppt等转ht ...