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 ...
随机推荐
- Nginx 使用自签名证书实现 https 反代 Spring Boot 中碰到的页面跳转问题
问题一:页面自动跳转到 80 端口 问题描述 最近在使用Nginx反代一个Spring Boot项目中碰到了一个问题,使用 Spring Boot 中的 redirect: 进行页面跳转的时候,通过 ...
- Oracle生成awr报告操作步骤介绍
AWR全称Automatic Workload Repository,自动负载信息库,是Oracle 10g版本后推出的一种性能收集和分析工具,提供了一个时间段内整个系统的报表数据.通过AWR报告,可 ...
- 【Virt.Contest】CF1321(div.2)
第一次打虚拟赛. CF 传送门 T1:Contest for Robots 统计 \(r[i]=1\) 且 \(b[i]=0\) 的位数 \(t1\) 和 \(r[i]=0\) 且 \(b[i]=1\ ...
- scp工具上传下载
1.从本地复制到远程 scp local_file remote_username@remote_ip:remote_folder 或者 scp local_file remote_username@ ...
- Mysql通过Merge引擎进行分表
Mysql通过Merge引擎进行分表 转载: https://www.jianshu.com/p/9420a6a8ae2e https://www.cnblogs.com/xbq8080/p/6628 ...
- day18-web工程路径
web工程路径 配置tomcat运行快捷键 tomcat启动的默认快捷键时shift+f10,可以自定义配置:file-setting-keymap-搜索run,找到右边写有shift+f10的选项, ...
- 安装kali linux(干货)
安装kali 一. 准备工具 1. VMware Workstation Pro https://www.vmware.com/cn/products/workstation-pro/workstat ...
- 【大数据面试】【框架】Shuffle优化、内存参数配置、Yarn工作机制、调度器使用
三.MapReduce 1.Shuffle及其优化☆ Shuffle是Map方法之后,Reduce方法之前,混洗的过程 Map-->getPartition(标记数据的分区)-->对应的环 ...
- 如何通过C#合并Word文档？
合并Word文档可以快速地将多份编辑好的文档合在一起,避免复制粘贴时遗漏内容,以及耗费不必要的时间,同时,也方便了人们阅读或者对其进行再次修改.例如,在我们进行团队作业的时候,每个人都会有不同的分工, ...
- 创建并且配置win10系统虚拟机
一.创建Windows10镜像 1.下载地址:https://www.microsoft.com/zh-cn/software-download/windows10 2.制作镜像 完成之后,会生成一个 ...