vue-router2.x
组件中的路由
<router-link to=""></router-link>
无参数
<router-link to="/ar/1">测试一</router-link>
<router-link to="/ar/2">测试二</router-link>
与router1.x不同点
在vue-router2.x中使用<router-link
的方式,v1.x中使用<a v-link="'/about'">About</a>
带参数
<router-link to="/ar/1?id=1&age=22">测试一</router-link>
<router-link to="/ar/2?id=2&age=24">测试二</router-link>
在vue-devtools中可查看到所有的某个路由的所有信息:
路由的重定向
路由的重定向需要我们在路由文件中配置:
new Router({
...
{
path: '/ar',
name: 'ar',
component: Ar
},{
path: '/ar/1',
redirect: '/ar/2', // 配置redirect跳转到测试二
name: 'ar1',
component: Ar1
},{
path: '/ar/2',
name: 'ar2',
component: Ar2
}
]
})
注意:从图中看出,虽然路由发生了跳转,但是后面跟的参数并没有发生变化。
组件内的导航钩子
beforeRouteEnter(to, from, next) 进入路由时候触发
beforeRouteLeave(to, from, next) 离开路由时候触发
参数含义:
- to: Route: 即将要进入的目标 路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
注意的点:在我写demo的时候发现,如果你在一个组件这么定义
...
beforeRouteEnter (to, from, next) {
},
...
进入路由钩子中什么也不执行next()
的话,会一直无法跳转到对应的路由
所以,建议一旦用了组件钩子,就一定不要忘记next
!
路由钩子不同于router1.x
activate
被替换为beforeRouteEnter
deactivate
被移除,使用beforeDestroy
或者destroyed
钩子作为替代。canActivate
被替换为beforeEnter
canDeactivate
被替换为beforeRouteLeave
嵌套路由
需要嵌套的目录结构:
- /ar (单独组件)
- /ar/1 (单独组件)
- /ar/2 (单独组件)
现在路由文件中配置:
new Router({
routes: [
...
{
path: '/ar',
name: 'ar',
component: Ar,
children:[ // 在ar中添加children子路由
{
path: '1',
name: 'ar1',
component: Ar1
},
{
path: '2',
name: 'ar2',
component: Ar2
}
]
}
// ,{
// path: '/ar/1',
// name: 'ar1',
// component: Ar1
// },{
// path: '/ar/2',
// name: 'ar2',
// component: Ar2
// }
]
})
ar.vue文件:
<template>
<div>
Ar下有两个嵌套的子路由
<router-link to="/ar/1?id=1&age=22">子路由一</router-link>
<router-link to="/ar/2?id=2&age=24">子路由二</router-link>
<router-view></router-view>
</div>
</template>
可见这个单文件中有两个router-view
。
vue-router2.x的更多相关文章
- 【vue】import的使用
以下是vue默认模板结构,自动加载HelloWorld (1)@ 等价于 /src 这个目录,避免写麻烦又易错的相对路径,是在webpack.base.config.js里面配置好别名 (2)impo ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- vue 路由demo2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue router应用及总结
编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...
- Vue路由注意事项
一.vue中路由的使用 1.定义组件 <template> <div class="hello"> <h1 @click="info&quo ...
- [转]vue router基本使用
第一步:安装 cnpm install vue-router --save 路由配置基本语法 router下index.js引入 import Vue from "vue"; im ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- CSS中的剪裁和遮罩
剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...
- css3动画图片波纹效果
这里的图片很有特点,下面有演示图片样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- [Paxos] Paxos Made Simple 读后感
Paxos 由著名图灵奖获得者Leslie Lamport提出,该算法是分布式一致性算法中的奠基之作,今天初读此文仅将相关学习心得予以记录. 1.Paxos 是什么?主要用来解决什么问题? Paxos ...
- Ubuntu 16.04系统下安装PHP5.6*
Ubuntu 16.04系统默认php7,并没有php5*的包,所以需要自己安装: 方法: 1.删除所有的php包列出安装的php包,dpkg -l | grep php| awk '{print $ ...
- maven的web项目手工发布
网上有很多人都认为maven的web项目发布时,要用这个命令那个命令,太麻烦了,用纯手工打造发布更为方便. 第一步,导出你所在项目maven的依赖包. 打开cmd窗口执行命令:mvn dependen ...
- 跟着刚哥梳理java知识点——包装类(十)
Java为8种基本数据类型都提供了对应的包装器类型 装箱和拆箱: public class Main { public static void main(String[] args) { Intege ...
- 探讨弹性布局Flexible Box
虽然Flex布局09年就被W3C所提出,但是目前浏览器支持上还不是很好,网上找的一张图片,仅供参考: 我们先从简单讲起.如果仅仅只想实现一个栅格布局,没必要引入一个复杂的框架(如bootstrap), ...
- Arduino LiquidCrystal Library Bug Report #174181
Arduino LiquidCrystal Character LCD Driver Library BUG Report #174181 by Conmajia Effected Devices H ...
- 简单介绍关于IOS的生命周期过程
初步了解一下生命周期的过程: 1.通过alloc init 分配内存,初始化controller. 2.loadViewloadView方法默认实现[super loadView]如果在初始化cont ...
- java复习(7)---集合类、泛型
本节主要结合用例讲述Java中Map类.Set类.List类如何使用. Java中有封装好的集合类,常用的有Map类.Set类.List类,简单说明一下他们的用法. List类,常用有ArrayLis ...