router学习

js小问题
起步
定义
动态路由匹配
- 通配符 AND 404
- 高级匹配
- 匹配优先级
嵌套路由
编程式的导航
- push和replace
- 注意
- router.go(n)
- 操作History
命名路由
命名视图
- 嵌套命名视图
重定向
路由组件传参
- 函数模式
前端路由模式
- hash模式
- history模式
- abstract模式
- 符号
导航守卫
- 全局前置守卫
- 全局解析守卫
- 全局后置钩子
- 组件内部守卫
- 完整导航解析流程
路由元信息
数据获取
- 导航后获取
- 导航前获取

js小问题

expoert default可用于导出常量等等，仅能用一次。

起步

来导航
to属性指定链接
router-link 被渲染成标签

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

路由出口，路由匹配到组件将渲染在此

定义

定义组件

const Foo={template:'<div>这是一个组件</div>'}

定义路由

const routes=[{path:'/foo',component:Foo}
]

创建和挂载根实例,注入路由器

const app=new Vue({router
}).$mount('#app')

诸如完毕，可以通过 this.$router来进行访问。

动态路由匹配

path:’/user/:id’ 以冒号开头，会设置到this.$route.params中
$route 还提供了其它有用的信息，例如 r o u t e . q u e r y （如果 u r l 中有查询参数）、 route.query（如果url中有查询参数）、 route.query（如果url中有查询参数）、route.hash等等。
组件复用问题：动态路由时出现，可以通过

watch:{  '$route'(to,from){...}  }

进行处理，或者引入beforeRouteUpdate(守卫导航)

通配符 AND 404

path:'*'匹配所有（通常用于404错误）
path:'/user-*'所有以/user开头的路径
使用this.$router.params.pathMatch来显示。

高级匹配

vue-router支持很多高级匹配

匹配优先级

同一个路由可以匹配多个路由，优先级按照路由定义顺序。

嵌套路由

/user/foo/profile ----> /user/foo/posts
User User
Profile ---------------------> Posts

const User = { template: '<div>...</div>'  }
const router = new VueRouter({routes:[{    path: ' /user/:id',component: User,children: [{path:'profile',...},{path:'posts',...}]}]
})

可以设置children中 path: ’ ’ 可以提供空的子路由进行渲染。

编程式的导航

创建a标签来定义导航链接。声明式
router.push(…)导航到不同url（向history栈添加新的记录）。编程式

参数类型	形式	描述
字符串
对象	{path:‘home’}
命名路由	{name:‘user’ , params:{…}}	若提供path，则不需params
带查询参数	{path:’…’ , query:{…:…}}

push和replace

参数	描述
onComplete	完成时候调用
onAbort	终止时候调用

注意

目的地与当前路由相同，使用beforeRouteUpdate来响应。
replace替换当前history记录。

router.go(n)

意思是向前或者向后退步。

操作History

router.push=window.history.pushState
router.replace=window.history.replaceState
router.go =window.history.go

命名路由

链接到命名路由

<router-link :to="{name:'user',params:{userId:123}}">User</router-link>

上面这段等于

router.push({name:'user',params:{userId:123}})

命名视图

同级展示多个视图（非嵌套）

<router-view  class="aaa"></...>
<router-view  class="bbb" name="b"></...>
<router-view  class="ccc" name="c"></...>

多个视图就需要多个组件

const router=new VueRouter({routes:[{path:'/',components:{default:Foo,b:Bar,c:Baz}}]
})

嵌套命名视图

{path:"/settings",component:Test,children:[{path:'email',component:TestEmail},{path:'profile',components:{default:TestProfile,helper:TestPreview}}]}

  <div><span>setting</span><router-view></router-view><router-view name="helper"/></div>

重定向

routes:[{path:'/a',redirect:'/b'}
]

访问/a就回到/b。

redirect: to =>{...}

作为方法，接受目标路由作为参数。返回重定向路径。

路由组件传参

解除耦合：

const User={props:['id'],template:'.......'
}

并且在Vuerouter中设置组件得props为true。

函数模式

props也可以设置函数模式。

{ path:'/..',component:...,props: (route) => (query: route.query.q) }

从而响应/..?q=vue会将{query:'vue'}传输。

前端路由模式

hash模式

使用url hash值来作路由，支持所有浏览器。
url改变，页面不会重新加载。
http://www.abc.com/#/hello ，hash值为 #/hello。hash不会在请求之中，对后端无影响，因此改变hash不会重新加载页面。
缺点是加上#后不太美观。

history模式

依赖html5 history api 和服务器配置。充分利用history.pushState,跳转而无需重新加载。

abstract模式

支持js环境

符号

#是vue-router使用的hash符号
#！是angularjs使用的hash符号

导航守卫

跳转或取消的方式守卫导航。

全局前置守卫

router.beforeEach(
(to,from,next)=>{  ... }
)

to 目标
from 准备离开
next 来resolve这个钩子，执行依赖next方法。next()进行管道下一个；next(false) 中断;next(’/’)跳转到下一个不同地址。

全局解析守卫

所有组件被解析后调用

全局后置钩子

router.afterEach

组件内部守卫

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

完整导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息

在路由中这样设置

以后就可以在$route中查找到对应的元信息。

数据获取

导航后获取

在组件生命周期钩子获取。（获取其间显示‘加载’）。

导航前获取

守卫中获取数据。

Vue之router学习相关推荐

四 Vue学习 router学习
index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...
四十三、在Vue使用router，路由的管理
@Author:Runsen @Date:2020/7/17 管理路由是一项必不可少的功能.今天,Runsen学习Vue Router. 文章目录安装Vue Router Vue Router使用 ...
vue - blog开发学习4
vue - blog开发学习4 1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template><div class="edit ...
vue - blog开发学习2
vue - blog开发学习2 首页博客列表的开发 1.修改index.vue,使能够支持列表功能 <template><div><PostList v-for=&quo ...
vue - blog开发学习1
vue - blog开发学习1 1.安装vue-cli vue intall -g vue-cli 2.创建项目 vue init webpack nblog 3.按提示要求配置项目 ? Projec ...
【Vue前端开发学习】第2章，Vue项目目录结构
文章目录前言一.新增router文件夹及其配置方法二.新增store文件夹及其配置方法三.index.html.App.vue.main.js三者之间的联系前言上一章节,通过Pycha ...
Vue开发中级学习教程
一.Vue开发中级学习教程 1.Vue2与Vue3的区别 2.基于Vue的UI框架整理 3.基于Vue的常用插件整理 4.Vue Router 路由管理详解 5.Vue +Element UI 菜单 ...
唐金州的Vue开发实战学习笔记（生态篇）
Vue开发实战学习笔记 Vuex Why Vuex How Vuex Vuex的核心概念和底层原理 Vuex的最佳实践 Vue Router Why Vue Router 路由类型及底层原理 Nuxt ...
Vue 第九天学习
Vue 第九天学习 1.实现发表评论功能 1.把文本框做双向数据绑定 v-model ="msg" 2.为发表按钮绑定一个事件 @click="post_Comment ...

Vue之router学习