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 ...
随机推荐
- @confirguration（proxyBeanMethods = false）的作用，如何选择Full模式和Lite模式
@Configuration(proxyBeanMethods = false) //告诉SpringBoot这是一个配置类 == 配置文件 public class MyConfig { @Bean ...
- 万万没想到，除了香农计划，Python3.11竟还有这么多性能提升！
众所周知,Python 3.11 版本带来了较大的性能提升,但是,它具体在哪些方面上得到了优化呢?除了著名的"香农计划"外,它还包含哪些与性能相关的优化呢?本文将带你一探究竟! 作 ...
- MessagePack 和System.Text.Json 序列号 反序列化对比
本博客将测试MessagePack 和System.Text.Json 序列号 反序列化性能 项目文件: Program.cs代码: using BenchmarkDotNet.Running; us ...
- React+echarts (echarts-for-react) 画中国地图及省份切换
有足够的地图数据,可以点击到街道,示例我只出到市级 以umi为框架,版本是: "react": "^18.2.0", "umi": &quo ...
- 【Java并发006】使用层面：Lock锁机制全解析
一.前言 二.synchronized局限性 + Lock锁机制的引入 2.1 synchronized局限性 第一,使用synchronized,其他线程只能等待直到持有锁的线程执行完释放锁(syn ...
- 记一次 .NET 某自动化集采软件 崩溃分析
一:背景 1.讲故事 前段时间有位朋友找到我,说他的程序在客户的机器上跑着跑着会出现偶发卡死,然后就崩掉了,但在本地怎么也没复现,dump也抓到了,让我帮忙看下到底怎么回事,其实崩溃类的dump也有简 ...
- ajax 获取json值
请求后台获取json: {"success":true,"datamap":{"rebackName":"振勋"}} a ...
- 【Java并发入门】03 互斥锁（上）：解决原子性问题
原子性问题的源头是线程切换 Q:如果禁用 CPU 线程切换是不是就解决这个问题了? A:单核 CPU 可行,但到了多核 CPU 的时候,有可能是不同的核在处理同一个变量,即便不切换线程,也有问题. 所 ...
- Golang反射获得变量类型和值
1. 什么是反射 反射是程序在运行期间获取变量的类型和值.或者执行变量的方法的能力. Golang反射包中有两对非常重要的函数和类型,两个函数分别是: reflect.TypeOf 能获取类型信息re ...
- PostgreSQL：查询元数据（表 、字段）信息、库表导入导出命令
一.查询表.模式及字段信息 1.查询指定模式下的所有表 select tablename,* from pg_tables where schemaname = 'ods'; 2.查询指定模式下的表名 ...