vue——Router简介

  • vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
  • vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
  • 传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换

1.动态路由匹配

定义路由

export default new Router({
routes: [
{
path: '/BookDetails/:book_id',
name: 'BookDetails',
component: BookDetails
},
{
path: '/BookDetailsTwo/user/:username/book/:book_id',
name: 'BookDetailsTwo',
component: BookDetailsTwo
},
]
})

页面

<template>
<div class="book">
<router-link :to="{ name:'BookDetails',params: { book_id: 1}}">跳转书籍详情\^o^/</router-link><br/><br/><br/>
<router-link :to="{ name:'BookDetailsTwo',params: { book_id: 1,username: '小嘟嘟'}}">跳转高级书籍详情┗|`O′|┛</router-link>
</div>
</template>

桥豆麻袋(~ ̄▽ ̄)~,对<router-link>感兴趣的可以去看 官网 ,或者 小姐姐(●'◡'●) 的博客,然后go on

点击跳转后的路由

http://localhost:8080/#/BookDetails/1
http://localhost:8080/#/BookDetailsTwo/user/小嘟嘟/book/1

跳转的页面接收路由参数(以第二个跳转为例)

<template>
<div>
<div>人员姓名:{{$route.params.username }}</div>
<div>书籍Id:{{$route.params.book_id }}</div>
</div>
</template>

1-1响应路由参数的变化

提醒一下,当使用路由参数时,例如从 /BookDetails/1 导航到 /BookDetails/2,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

BookDetails组件

<template>
<div class="book-details">
<div>书籍详情 Id:{{ $route.params.book_id }}</div><br/><br/>
<router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(* ̄▽ ̄*)ブ</router-link>
</div>
</template>
<script>
export default {
data () {
return {
}
},
created(){
console.log('进入图书详情~~~')
}
}
</script>

当从父页面跳转过来时会执行生命周期,当点击组件里‘自己跳自己’时,并不会触发生命周期

当然有解决方法,还是两种(●ˇ∀ˇ●)

方法一(使用watch (监测变化) $route 对象)

BookDetails组件

<template>
<div class="book-details">
<div>书籍详情 Id:{{ $route.params.book_id }}</div><br/><br/>
<router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(* ̄▽ ̄*)ブ</router-link>
</div>
</template>
<script>
export default {
data () {
return {
}
},
created(){
console.log('进入图书详情~~~')
},
watch:{
'$route'(to, from) {
console.log(to ,from, '路由监听')
}
}
}
</script>

方法二(使用beforeRouteUpdate 导航守卫)

BookDetails组件

<template>
<div class="book-details">
<div>书籍详情 Id:{{ $route.params.book_id }}</div><br/><br/>
<router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(* ̄▽ ̄*)ブ</router-link>
</div>
</template>
<script>
export default {
data () {
return {
}
},
created(){
console.log('进入图书详情~~~')
},
beforeRouteUpdate(to, from, next){
console.log(to, from, next,'导航守卫')
next()
},
watch:{
'$route'(to, from) {
console.log(to ,from, '路由监听')
}
}
}
</script>

注意!!!用beforeRouteUpdate记得要写next(),否则不会跳转路由

1-2捕获所有路由或 404 Not found 路由

在上面定义好的路由最后面添加新的路由

{
path: '/Fruits*',
name: 'FruitsBanana',
component: FruitsBanana
},
{
path: '*',
name: 'NotFound',
component: NotFound
}

当使用通配符路由时,请确保路由的顺序是正确的,也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误

当我们输入路由

http://localhost:8080/#/FruitsApple

会匹配到‘/Fruits*’,所以会跳转到FruitsBanana组件

再次输入路由

http://localhost:8080/#/IAmVeryHappy

这时候就会匹配到 ‘*’, 自然就进入到了写好的404页面(~ ̄▽ ̄)~

1-3高级匹配模式

vue-router 使用 path-to-regexp 作为路径匹配引擎,所以支持很多高级的匹配模式,例如:可选的动态路径参数、匹配零个或多个、一个或多个,甚至是自定义正则匹配。

举个栗子(~ ̄▽ ̄)~

// 第一种(通过?的使用可以将参数变为可选项)
{
path: '/PathToRegexp/:id?',
name: 'PathToRegexp',
component: PathToRegexp
} // 第二种(使用正则,只匹配id是数字)
{
path: '/PathToRegexp/:id(\\d+)',
name: 'PathToRegexp',
component: PathToRegexp
}

更多高级匹配

1-4匹配优先级

有时候,同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。

定义路由

{
path: '/Fruits*',
name: 'FruitsBanana',
component: FruitsBanana
},
{
path: '/Fruits*',
name: 'FruitsPear',
component: FruitsPear
}

如上面所示,谁先定义的,谁的优先级就最高,只要匹配成功,就会进入到FruitsBanana组件

2.嵌套路由

Vue会自带一个 是最顶层的出口,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套

呐,现在来改变一下路由

{
path: '/Fruits',
name: 'Fruits',
component: Fruits,
children: [
{
path: 'Apple',
name: 'Apple',
component: Apple
},
{
path: 'Grape',
name: 'Grape',
component: Grape
},
]
}

组件

<template>
<div>
我是水果页面<br/><br/><br/>
<router-link :to="{ name:'Apple'}">苹果

vue Router——基础篇的更多相关文章

  1. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

  2. Vue.js基础篇实战--一个ToDoList小应用

    距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...

  3. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  4. Vue Router基础

    路由 安装 vue-router 起步 <router-link to="/foo">Go to Foo</router-link> <router- ...

  5. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  6. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  7. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

  8. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  9. Vue 基础篇

    Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...

随机推荐

  1. C# 线程系列三 定时器线程

    上一篇文章我们讲诉了自定义线程执行器和任务处理器 我们继续来讲解自定义线程的定时执行器,我们在很多场景下需要做到某些状态或者数据进行更新,如果事情很多很杂,很时候时候会创建很多不同的定时器那么势必会照 ...

  2. ios 简单的倒计时验证码数秒过程实现

    timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerFireMethod:) ...

  3. CGAffineTransformScale

    [UIViewbeginAnimations:nilcontext:nil]; [UIViewsetAnimationDuration:0.5]; _imgView.transform = CGAff ...

  4. 团队作业八——第二次团队冲刺(Beta版本)第7天&amp;项目汇总

    项目汇总 第一天:http://www.cnblogs.com/newteam6/p/6879383.html 第二天:http://www.cnblogs.com/newteam6/p/688078 ...

  5. MyEclipse10.0的破解过程详细及图解

    MyEclipse10.0的破解过程详细图解 准备阶段 : 1. 破解软件(网上有下载) 2. JDK软件(免费软件) 开始破解: 1. 关闭MyEclipse 10.0 2. 安装 JDK 然后解压 ...

  6. Jenkins-配置LDAP认证

    Jenkins-配置LDAP认证 参考文档: LDAP添加用户详见我的博文  Linux分类 中的< LDAP2-创建OU和用户>博文. 1.LDAP配置 1.准备一个adminDN账号用 ...

  7. {Django基础六之ORM中的锁和事务}一 锁 二 事务

    Django基础六之ORM中的锁和事务 本节目录 一 锁 二 事务 一 锁 行级锁 select_for_update(nowait=False, skip_locked=False) #注意必须用在 ...

  8. bzoj 1483: [HNOI2009]梦幻布丁 启发式合并vector

    1483: [HNOI2009]梦幻布丁 Time Limit: 10 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description N个 ...

  9. Linux 基础教程 26-基础网络配置

    基本配置     要想上网,计算机需要有专门的网络连接设备,即网络接口卡或者网卡.网卡按照与计算机主机的连接方式可以分为PCI网卡.ISA网卡及无线网卡(USB网卡)等.在Linux中可以使用命令ls ...

  10. HDU.1166 敌兵布阵 (线段树 单点更新 区间查询)

    HDU.1166 敌兵布阵 (线段树 单点更新 区间查询) 题意分析 加深理解,重写一遍 代码总览 #include <bits/stdc++.h> #define nmax 100000 ...