学习路由器vue-router
vue-router:vue官方路由管理器。
功能:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为
安装及创建router对象
安装 npm i vue-router
1.创建单条路由
let index = {path:/index,name:'index',component:映射index的组件}
2.将多条路由合并为一组
let routes = [
index,
页面2,
页面3
]
3创建路由对象
const router = new VueRouter({routes})
4在根实例上引用
new Vue({
router
}).$mount(root)
使用router及传参
1、以params作为参数传递
创建路由
const pageA = {
path:'/pageA/:id', //id是动态传递的参数
name:'contentA', //与router-link中to属性的name对应
component:pageA //pageA的组件
}
跳转路由的链接
<router-link :to="{name:'contentA',params:{id:1,name:'pageA'}}">
Go to PageA
</router-link>
或者传path属性
<router-link :to="{path:/learnRouter/contentA/${id}
}">
Go to PageA
</router-link>
页面跳转成功后浏览器url为显示为 /pageA/id
this.$route.params.id来获取
2.以query作为参数传递
const pageA = {
path:'/pageA, //以query作为参数传不需要在path后面加动态属性
name:'contentA', //与router-link中to属性的name对应
component:pageA //pageA的组件
}
跳转路由的组件
<router-link :to="{name:'contentB',query:{id:2}}">
Go to PageA
</router-link>
浏览器url上显示为/pageA?id=1
this.$route.query.id获取
在任何组件中都可以通过this.$router 获得路由对象,this.$route访问的当前路由
导航守卫
全局导航守卫,页面每一次跳转都可以监听,也可以放到组件中单独使用
router.beforeRouteUpdate (to, from, next) {
// to 来自哪里
// from 前往哪里
//next() 来resolve这个钩子的方法,如果不调用就不会完成跳转
//next('/other') 跳到另外一个页面
//next(false) 终止跳转
}
视图
router-link跳转的组件需要加上视图router-view才能显示,
当一个页面有多个视图时用name来区分
视图命名,路由里的component里的name为键名对应router-view name=a
<router-view name="a"></router-view>
//路由
const pageA = {
path:'/pageA',
components:{
a:pageA.vue
}
//这条路由的意思是跳转到/pageA时显示name为a的视图,name=a的视图对应的组件也就是pageA.vue
嵌套路由
例如需要一个tab导航栏,单击菜单时切换组件,但是导航菜单不变。
const route = [
{
path:'/index',
name:'index',
//这里定义子路由
children:[
{
path:'/index/pageA',
name:'pageA',
component:pageA
},
{
path:'/index/pageB',
name:'pageB',
component:pageB
}
]
}]
<router-link path="/pageA">goto pageA </router-link>
<router-link path="/pageB">goto pageB </router-link>
<router-view></router-view>
原文地址:https://segmentfault.com/a/1190000016784786
学习路由器vue-router的更多相关文章
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)
脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...
- Vue Router详细教程
1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
随机推荐
- Java EE学习笔记(十)
MyBatis与Spring的整合 1.整合环境搭建 1).要实现MyBatis与Spring的整合,很明显需要这两个框架的JAR包,但是只使用这两个框架中所提供的JAR包是不够的,还需要其他的JAR ...
- java中 json和bean list map之间的互相转换总结
JSON 与 对象 .集合 之间的转换 JSON字符串和java对象的互转[json-lib] 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级 ...
- net core (上)
net core (上) 本文是基于Windows10的. 下载地址: https://code.visualstudio.com/ insider 版下载地址: https://code.visua ...
- NET Core 模块化,多租户框架
NET Core 模块化,多租户框架 Orchard Core Framework:ASP.NET Core 模块化,多租户框架 上一篇编写Orchard Core一分钟搭建ASP.NET Core ...
- Linux下无图形界面安装Matlab
1 下载R2015b_glnxa64.iso和破解文件Matlab+2015b+Linux64+Crack 百度网盘可以直接搜索资源.推荐一个可以多线程下载百度网盘超大文件的工具Aria2,均速1.3 ...
- vue使用uglifyjs-webpack-plugin后打包报错
楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin具体代码如下 npm install uglifyjs-web ...
- C#调用C++接口返回字符串的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 现在有这样一种情景,假如C#调用C++接口需要返回一个字符串.因为字符串是不定长的,因此传递一个定长的字符串进去是不合 ...
- Effective C++ 重要条款
学习c++的童鞋们,这本书不能错过,最近在学校图书馆借来这本书,准备好好啃啃它了,先把它的基本内容过一遍吧. 改变旧有的的C习惯 条款1:尽量以const和inline取代#define. 条款2:尽 ...
- nmap -sS
SYN 扫描,半连接,受到syn/ack响应后意味着端口开放,收到rst包意味着端口关闭.
- javascript 和Jquery 互转
jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...