vue --- [全家桶]vue-router
1. Vue - router
- Vue Router是 Vue.js 官方的路由管理器
- 它和Vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发
Vue Router包含的功能有:
- 支持HTML5历史模式或hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
<div id="app"><router-link to='/user'>User</router-link><router-link to='/register'>Register</router-link><!-- 将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置--><router-view></router-view>
</div>
<script>const User={template: `<h1>User</h1>`}const Register={template: `<h1>Register</h1>`}const router = new VueRouter({routes:[{path: '/user',component: User},{path: '/register',component: Register}]})const vm = new Vue({el:'#app',data: {},router})
</script>
1.1 路由重定向
var router = new VueRouter({routes:[{ path: '/', redirect: '/user'},{ path: '/user', component: User},{ path: '/register', component: Register}]
})
1.2 嵌套路由
const router = new VueRouter({routes:[{ path: '/user', component: User },{ path: '/register',component: Register,children: [{ path: '/register/tab1', component: Tab1 },{ path: '/register/tab2', component: Tab2}]}]
})
1.3 动态路由匹配
- 以下路由规则该如何匹配
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
- 进行动态路由匹配
var router = new VueRouter({routes: [{path: '/user/:id', component: User}]
})
// 匹配得到的参数存在 $route.params 中
const User = {template: '<div>User {{ $route.params.id }}</div>'
}
1.4 路由组件传递参数
- props的值为布尔类型
const router = new VueRouter({routes:[{ path: '/user/:id', component: User, props: true}]
})
const User = {props: ['id'],template: `<div>用户ID: {{ id }}</div>`
}
- props的值为对象类型
const router = new VueRouter({routes: [{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 12}}]
})
const User = {props: ['uname', 'age'],template: '<div>用户信息: {{ uname + '---' + age}}</div>'
}
- props的值为函数类型
const router = new VueRouter({routes:[{ path: '/user/:id', component: User, props: route => ({ uname: 'zs', age:20, id: route.params.id })}]
})
const User = {props: ['uname', 'age', 'id'],template: '<div>用户信息: {{ uname + '---' + age + '---' +id}}</div>'
}
1.5 命名路由
- 未来更加方便的表示路由的路径,可以给路由规则起一个别名,即为"命名路由"
<router-link :to="{ name: 'user', params: {id: 123}}">User</router-link>
<script>const router = new VueRouter({routes:[{ path: '/user/:id', name: 'user', component: User}]})const User = {template: `<div><h1> User -- {{$route.parmas.id}} </h1></div>`}
</script>
1.6 编程式导航
- 声明式导航: 通过点击链接实现导航的方式,叫做声明式导航
- 普通网页: 点击
<a></a>
- vue:
<router-link></router-link>
- 普通网页: 点击
- 编程式导航: 通过JavaScript形式中的API实现导航的方式
- 普通网页中:
location.href
- Vue:
- this.$router.push(‘hash地址’)
- this.$router.go(n) - 前进后退
- 普通网页中:
// this.$router.push
const User = {template: `<div><h1>User {{$route.params.id}} 组件</h1><button @click="goRegister">跳转到注册页面</button></div>`,methods:{goRegister(){this.$router.push('/register')}}
}// this.$router.go
const Register = {template: `<div><h1>Register</h1><button @click="goBack">后退</button></div>`,methods: {goBack() {this.$router.go(-1)}}
}
- router.push()方法的参数规则
// 字符串(路径名称)
router.push('/home')// 对象
router.push({ path: '/home'})// 命名的路由(传递参数)
router.push({ name: '/user', params: { userId: 123}})// 带查询参数,变成 /register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi'}})
vue --- [全家桶]vue-router相关推荐
- 【 Vue全家桶 · Vue CLI(四)】Vue项目的详细目录结构解析
文章目录 前言 -- 一级目录解析 一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...
- 什么是Vue全家桶,Vue全家桶包含哪些东西
vue全家桶介绍: vue全家桶是基于vue开发必备的也是必学的东西,概括起来就是:.1.项目构建工具.2.路由.3.状态管理.4.http请求工具. 最常见常用的vue全家桶简单的介绍一下,希望可以 ...
- Vue全家桶 + webpack 构建单页应用初体验
文章指南 主题 承接这上一篇Vue + Webpack 构建模块化开发框架详解,我们知道了如何使用webpack对vue进行打包,从而开始我们的前端模块化开发之路,这一篇在上一篇的基础上讲解 Vu ...
- vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
- vue全家桶开发的一些小技巧和注意事项
作者:沉末_ https://juejin.im/user/5b7c1be9e51d4538b35bfc32 前言 用vue全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来, ...
- VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局 一.页面布局 二.创建Home组件 三.路由index.js 文件配置主页路径 四.添加welcome组件 一.页面布局 <el-container& ...
- vue全家桶+koa2+mongoDB打造全栈社区博客
背景 一直以来都想自己编写一个自己的社区博客,后来在网上找了一下,最后决定参考慕课网的一个社区项目,决定改用vue2.6+AntdForVue+koa2+mongoose实现一套社区博客. 简介 这是 ...
- vue全家桶+Echarts+百度地图,搭建数据可视化系统
本文章篇幅略长,内容有点多 大佬可根据目录选择性查阅 新人可一步步来阅读 1 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未 ...
- Vue开发入门(二) | 说说Vue全家桶有哪些~
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目 前言: *Vue两大核心思想:组件化和数据驱动. 组件化:把整体拆分为各个可以复用的个体 数据驱动:通过数据变化直接影响bom展示, ...
- Vue全家桶包含都有哪一些?
vue全家桶有:1.Vue-cli,基于Vue.js进行快速开发的完整系统:2.vue-router,vue官方的路由管理器:3.vuex,为vue应用程序开发的状态管理模式:4.axios,基于Pr ...
最新文章
- 什么是原码、反码、补码?什么是按位与?范围数字按位与!
- 生物信息学 生物科学、农学、林学、医学
- 【C 语言】文件操作 ( 文件加密解密 | 使用第三方 DES 加密解密库 | 头文件导入 | 兼容 C++ 语言 | 加密解密函数说明 )
- 旅馆客未满 计算机术语,前厅测试题
- LeetCode 203. Remove Linked List Elements
- xampp的mysql和phpnow的mysql,xampp的apache和visualsvn的apache和phpnow的apache
- 6岁会编程,14岁就被麻省理工录取,神童谎言是如何诞生的?
- python基本代码教程-Python基础教程(第3版)
- Spark HA 集群搭建【1、基于文件系统的手动HA 2、基于zk的自动HA】
- 以python项目为例的Pyinstaller打包详细教程
- 红黑树 一张导图解决红黑树全部插入和删除问题 包含详细操作原理 情况对比
- 碳排放权交易管理办法即将施行,你知道火电厂的碳排放是怎么算出来的吗?
- boren - 飞机大战9之战机爆炸
- 数据分析2——核心思维技巧
- IDE/SATA/SCSI接口
- 华为v2服务器系统安装系统,华为服务器RH 2288H v2安装系统
- 【转载】各大主流IP摄像头的rtsp地址介绍
- 实战技术:提升网站用户体验—WebP 图片的高效使用
- 计算机主机重启键,重启(计算机术语)_百度百科
- VPB测试 使用Osgdem运行例子