路由组件传参

通过props解耦

const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true }, // 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})

布尔模式

如果props被设置为true,route.params参数将被设置为组件属性

对象模式

const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})

函数模式

/search?q=vue 会将{query:vue}传递给组件SearchUser

const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})

History模式

vue-router默认使用hash模式

const router = new VueRouter({
mode: 'history',
routes: [...]
})

如果使用history模式,URL就像正常url,http://mysite.com/user/id

这种模式需要后台配置

警告:所有路径都会返回index.html,因此需要配置一个404页面

const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})

导航守卫

全局前置守卫

const router = new VueRouter({ ... })

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

三个参数

to:即将进入的Route

from:当前导航离开的Route

next:

next()进行管道中的下一个钩子

next(false)中断当前导航

next('/')或next({path:'/'}) 中断当前导航,跳转到下一个导航

一个登陆案例,根据用户是否登录判断路由跳转

router.beforeEach((to, from, next) => {
// 如果不是登录页
if (to.name !== 'login') {
if (HAS_LOGIN) next()
else next({ name: 'login' })
} else {
if (HAS_LOGIN) next({ name: 'home' })
else next()
}
})

全局后置钩子

router.afterEach((to, from) => {
// ...
})

一个页面加载的案例。loading设置

路由独享守卫

const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})

组件内的守卫

const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}

完整的导航流出

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#组件内的守卫

路由元信息

定义路由可以配置meta字段

const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})

我们在全局导航守卫中调用

case

router.beforeEach((to, from, next) => {
console.log(to)
})
fullPath: "/foo/bar"
hash: ""
matched: () [{…}, {…}]
meta: {requireAuth: true}
name: "bar"
params: {}
path: "/foo/bar"
query: {}
__proto__: Object

我们能从to中获得meta中数据

router.beforeEach((to, from, next) => {
const requireAuth = to.meta.requireAuth if (requireAuth) {
if (HAS_LOGIN) next()
else next({ 'name': 'login' })
} else {
next()
}
})

过渡效果

<transition>
<router-view></router-view>
</transition>

单个路由过渡

const Foo = {
template: `
<transition name="slide">
<div class="foo">...</div>
</transition>
`
} const Bar = {
template: `
<transition name="fade">
<div class="bar">...</div>
</transition>
`
}

数据获取

导航完成后获取数据

$router.params.id获得文章数据

<template>
<div class="post">
<div class="loading" v-if="loading">
Loading...
</div> <div v-if="error" class="error">
{{ error }}
</div> <div v-if="post" class="content">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</template>
export default {
data () {
return {
loading: false,
post: null,
error: null
}
},
created () {
// 组件创建完后获取数据,
// 此时 data 已经被 observed 了
this.fetchData()
},
watch: {
// 如果路由有变化,会再次执行该方法
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.post = null
this.loading = true
// replace getPost with your data fetching util / API wrapper
getPost(this.$route.params.id, (err, post) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
}
}
}

在导航完成前获得数据beforeRouterEnter

export default {
data () {
return {
post: null,
error: null
}
},
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) => {
next(vm => vm.setData(err, post))
})
},
// 路由改变前,组件就已经渲染完了
// 逻辑稍稍不同
beforeRouteUpdate (to, from, next) {
this.post = null
getPost(to.params.id, (err, post) => {
this.setData(err, post)
next()
})
},
methods: {
setData (err, post) {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
}
}
}

滚动行为

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})

当切换到新的路由时候,想要页面滚动到顶部,或者原先的位置

scrollBehavior (to, from, savedPosition) {
return { x: , y: }
}

路由懒加载

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})

Vue Router高级的更多相关文章

  1. vue Router——基础篇

    vue--Router简介 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路 ...

  2. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  3. vue路由高级用法

    五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',r ...

  4. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  5. vue router 只需要这么几步

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

  6. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  7. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  8. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  9. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

随机推荐

  1. Arch安装墨刀(产品原型工具)

    Arch通过aur安装墨刀的时候报错,查看PKGBUILD发现下载地址错误("https://s3.cn-north-1.amazonaws.com.cn/modao/download&qu ...

  2. 前端学习(二十一)初识h5(笔记)

    html5        主要目标:语义化!可以被人或者机器更好的阅读! 支持各种媒体的嵌入!不兼容低版本!------------ html5新标签: 普通:     <header clas ...

  3. python输入问题

    1.关于python的输入问题: 在2.x版本单行单输入input,单行多输入raw_input 在3.x版本中就已经没有raw_input,只有input,单行单输入多输入都可以. 类似2 3 4的 ...

  4. 使用Git实现Laravel项目的自动化部署

    简介 不知道大家一开始是怎么使用 git 进行开发的,反正我个人是先将代码提交到 github 仓库,然后用 SSH 登录到服务器,然后进行克隆或者版本更新.听起来就很麻烦,当然实际操作中也很麻烦,那 ...

  5. go垃圾回收

    go垃圾回收 当创建一些变量时,变量有一个确定的生命周期.例如函数中定义的局部变量,当函数退出时变量就不存在了.另外在其他情况下,至少对于编译器来说,这不是那么的明显.例如,某个被函数返回的变量的生命 ...

  6. Vuex 常规用法

    背景 很多时候我们已经熟悉了框架的运用,但是有时候就是忘了怎么用 所以这里想记下大部分的框架使用方法,方便使用的时候拷贝 一.安装 npm 方式 npm install vuex --save yar ...

  7. 配置Redis集群为开机自启动

    vim /etc/init.d/redisc 将下方脚本写入redisc文件中 #!/bin/sh # chkconfig: 2345 80 90 # # Simple Redis init.d sc ...

  8. C语言新手写扫雷攻略3

    界面绘制好后,雷数也布置了,接下来就是游戏的运行过程了,今天先不说具体过程,再来看看需要用到的辅助函数 先是简单的画红旗,鼠标右键的功能是画红旗,至此我们都是在使用函数自己绘图,效率是低,但有助于理解 ...

  9. targetSdkVersion和与target属性的区别

    参考:http://blog.csdn.net/dai_zhenliang/article/details/8175781 AndroidMenifest.xml中targetSdkVersion和p ...

  10. Sql生成 Insert 语句

    declare @TableName sysname select @TableName = 'T_OOSOrder' declare @result varchar(max) = 'INSERT I ...