【vue】Vue-router
Vue-router
- 安装
npm install vue-router --save-dev
vue-cli中已经选择安装了vue-router,那这里不需要重复安装了
- 解读route
路径```src/router/index.js``
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称,
component: HelloWorld //对应的组件模板
}
]
})
<router-link to="/">首页</router-link>
- 配置子路由
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称,
component: HelloWorld //对应的组件模板
},
{
path: '/hi',
name: 'Hi',
component: Hi,
children: [
{ path: '/', name: 'hi', component: Hi },
{ path: 'hi1', name: 'hi1', component: Hi1 },
{ path: 'hi2', name: 'hi2', component: Hi2 }
]
}
]
})
- 参数传递
- 用name传递参数
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称,
component: HelloWorld //对应的组件模板
}]
<p>{{$route.name}}</p>
- 通过 标签中的to传参
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
<p>{{$route.params.username}}</p>
利用url传递参数
:
冒号的形式传递参数{
path: '/params/:newsId/:newsTitle',
name: 'Params',
component:Params
}
<!-- 传参 -->
<router-link to="/params/aaa/bbb">Params</router-link> <!-- 接收参数 -->
<div>
<p>新闻ID:{{$route.params.newsId}}</p>
<p>新闻标题:{{$route.params.newsTitle}}</p>
</div>
正则表达式在URL传值中的应用
path:'/params/:newsId(\\d+)/:newsTitle', //newsId 限制数字
redirect
重定向alias
别名
redirect:直接改变了url的值,把url变成了真实的path路径。
alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了中的内容
transition
过渡动画
<transition name="fade">
<router-view/>
</transition>
组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:
fade-enter
进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
fade-enter-active
进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。fade-leave
离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。fade-leave-active
离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。
.fade-enter {
opacity:0;
}
.fade-leave{
opacity:1;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}
mode
模式
histroy
url没有
#
号,浏览历史记录栈的API实现hash
默认,监听location对象hash值变化事件来实现
window.onhashchange
路由钩子函数
beforeEnter
写在路由文件中,在进入此路由配置时{
path: '/params/:newsId(\\d+)/:newsTitle',
name: 'Params',
component: Params,
beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();
}
}beforeRouteEnter
写在模板中,在路由进入前beforeRouteLeave
写在模板中,在路由离开前
export default {
data() {
return {
msg: "params pages"
};
},
beforeRouteEnter(to, from, next) {
console.log("准备进入路由模板");
next();
},
beforeRouteLeave(to, from, next) {
console.log("准备离开路由模板");
next();
}
};
编程式导航
router.go(-1) //代表着后退,我们可以让我们的导航进行后退,并且我们的地址栏也是有所变化的。
router.go(1) //前进
this.$router.push('/xxx')//跳转
【vue】Vue-router的更多相关文章
- 【可视化】Vue基础
作者 | Jeskson 来源 | 达达前端小酒馆 Vue简介 Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点. 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完 ...
- 【Vue】Vue的依赖追踪系统 ——搞懂methods watch和compute
从作用机制和性质上看待methods,watch和computed的关系 <他三个是啥子关系呢?> 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 【1】vue/cli 3.0 脚手架 及cube-ui 安装
安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ ...
- 【vue】vue前端项目结构
[一]项目结构 [二]项目结构释意 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm ...
- 【转载】Vue项目中的文件/文件夹命名规范
文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名 ...
- 【转】Vue.js:轻量高效的前端组件化方案
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- 【06】Vue 之 组件化开发
组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...
- 【05】Vue 之 实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue学习笔记【23】——Vue组件(组件的定义)
定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...
随机推荐
- CF623A Graph and String
个人思路: 显然,和其他所有点连边的点都是 b.我们接下来不考虑这些点. 剩余 a 和 c 必然自己形成一个连通块,每个点与块内其他所有点连边. 超过 \(2\) 个连通块,或存在点没有与块内其他所有 ...
- soursetree 关于https:git remote: Unauthorized和username和password修改
一.sourcetree推送代码提交不上提示https:git remote: Unauthorized由于没有权限,需要登陆正确的账号以及密码即可以提交 二.SourceTree这是一个无效源路径/ ...
- 蓝牙mesh组网实践(mesh组网的评估与沁恒蓝牙芯片选型)
目录 沁恒的组网方式主要有2.4G私有协议组网和BLE mesh组网两大类.2.4G私有协议组网灵活性相对较高,对开发者的要求也相对较高.mesh组网本身有一系列规范,考虑到了可靠性.安全性.功能性等 ...
- Pytest初识
一.单元测试框架简介 1. 什么是单元测试 单元测试是指在软件开发过程中,针对软件的最小单位(函数,方法)进行正确性的检查测试. 2. 常用单元测试框架 2.1 Java 类别 junit testn ...
- “const char*“类型的实参与“LPCWSTR-类型的形参不兼容
const char *类型的实参与LPCWSTR类型的形参不兼容解决 LPCWSTR类型是是一个指向unicode编码字符串的32位指针,所指向字符串是wchar型(4字节,Unicode编码宽字节 ...
- 针对单一key加读写锁
一.什么是读写锁 读写锁是JDK1.5提供的一个工具锁,适用于读多写少的场景,将读写分离,从而提高并发性. 二.读写锁的特点 读锁是共享锁,写锁是排他锁,读锁和写锁不能同时存在: 读锁不能升级为写锁: ...
- Python3.6多线程爬虫
Python版本 3.6 简单写一个爬虫,在写的过程熟悉Python语法,不得不说Python用起来真666; 代码功能是访问网站首页将所有a标签值作为文件夹,将当前网页所有图片下载对应文件夹中;其实 ...
- pve apt 更新
解决pve6.2/pve6.3 安装ifupdown2,失败问题 https://www.cnblogs.com/lovesKey/p/14400874.html https://blog.whsir ...
- vue重置data数据为初始状态
vue中: this.$data 获取当前状态下的data this.$options.data() 获取该组件初始状态下的data 所以,下面就可以将初始状态的data复制到当前状态的data,实现 ...
- mysql(insert + group by + on duplicate key update)
group by 的内容设为子表tmp, 外面嵌套一层查询 连接 on duplicate key update key = tmp.new_key