组件中的路由


<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的更多相关文章

  1. 【vue】import的使用

    以下是vue默认模板结构,自动加载HelloWorld (1)@ 等价于 /src 这个目录,避免写麻烦又易错的相对路径,是在webpack.base.config.js里面配置好别名 (2)impo ...

  2. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  3. vue 路由demo2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue router应用及总结

    编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...

  5. Vue路由注意事项

    一.vue中路由的使用 1.定义组件 <template> <div class="hello"> <h1 @click="info&quo ...

  6. [转]vue router基本使用

    第一步:安装 cnpm install vue-router --save 路由配置基本语法 router下index.js引入 import Vue from "vue"; im ...

  7. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  8. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  9. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  10. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. vue学习笔记 计算属性(四)

    计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...

  2. Pad控件 UIPopoverController的介绍与使用(Pad的专属菜单控件、Swift版本)

    UIPopoverController 是iPad特有控件,iOS9之前,在iOS上也可以使用,在iOS9之后,只能用于Pad上. 如果非要在iOS上使用,编译不会有问题,运行后会崩溃,报错如下: T ...

  3. 【笔记】归纳js getcomputedStyle, currentStyle 以及其相关用法

      好吧,鉴于前端则个行业知识宽度广而深,早期看过高程介绍过的获取元素计算后的最终样式(浏览器显示的最终样式)的方法现在也忘得七七八八了 于是百度了一下,看了一下大神张鑫旭的博客,这里写个随笔记录一下 ...

  4. 老李推荐:第6章6节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-命令队列

    老李推荐:第6章6节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-命令队列   事件源在获得字串命令并把它翻译成对应的MonkeyEvent事件后,会把这些 ...

  5. CSS3——复杂选择器

    今天把视频里的CSS3复杂选择器部分看完了,来整理一下学到的知识点. 1.兄弟选择器:同一位置级别,可称为兄弟元素 a.相邻兄弟选择器:next紧紧跟在[当前元素之后的](一个),指定选择器的元素   ...

  6. web 项目中a标签传值(中文)到后台的乱码问题

    web 项目中a标签传值(中文)到后台的乱码问题 jsp页面中的a标签: .............. <c:forEach items="${sellerList }" v ...

  7. Struts2中there is no action mapped for acion name (/XXXXX)

    这里的问题出在配置struts.xml中,去掉配置中 namespace="/"属性 即可解决.不同的调用action的方式对namespace="/"属性有的 ...

  8. SqlDataReader生成动态Lambda表达式

    上一扁使用动态lambda表达式来将DataTable转换成实体,比直接用反射快了不少.主要是首行转换的时候动态生成了委托. 后面的转换都是直接调用委托,省去了多次用反射带来的性能损失. 今天在对Sq ...

  9. nodejs将JSON字符串转化为JSON对象

    如何将JSON字符串转化为JSON对象? JSON.parse(str)       JSON是javascript的一个内置对象,提供了转换JSON对象与字符串互相转换的方法: 问题来了,道理我都懂 ...

  10. 初学Java scirpt(判断、循环语句)

    在编写代码时,我们经常需要为不同的判断结果来执行不同的动作以及需要反复执行同一段代码,这时我们就需要使用判断和循环语句来实现. 1.判断语句(if) 判断语句经常用的有(if......else).( ...