路由组件传参

通过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. NFS服务的安装

    NFS服务的安装 1.环境准备 2.安装服务 [root@localhost ~]# yum -y install nfs-utils因为centos7自带了rpcbind,所以不用安装rpc服务,r ...

  2. Linux账号管理与ALC权限设定(一)

    UID  与   GID UID用户的编号  GID 用户群组的编号 账号登录时,有一个对应的文本来记录某个账户的UID与GID.然后获得这个UID去对应的密码文本中,取得密码进行比对,然后登陆. 保 ...

  3. grep 正则2

    基本正则表达式所定义的元字符 元字符 作用 例子 例子说明 ^ 行首定位符 ^ty 匹配"t"开头,后面紧跟一个"y"的字符串 $ 行尾定位符 txt$ 匹配以 ...

  4. 71 Serializable(序列化和反序列化)

    对象的输出流:ObjectOutputStream  把对象输出到文件存储起来,我们称作为序列化对象的输入流:ObjectInputStream   把对象从文件中读取出来,我们称作为反序列化 Obj ...

  5. leetcood学习笔记-13

    错误记录 class Solution: def romanToInt(self, s: str) -> int: d = {'I':1,'V':5,'X':10,'L':50,'C':100, ...

  6. Delphi ADOQuery的 DisableControls 和 EnableControls方法

    DisableControls方法是在程序修改或后台有刷新记录的时候切断数据组件,如TTABLE.ADOQUERY等等与组件数据源的联系.如果没有切断,数据源中只要一有数据的改动,尤其是批量改动的话, ...

  7. PHP FILTER_SANITIZE_ENCODED 过滤器

    定义和用法 FILTER_SANITIZE_ENCODED 过滤器去除或 URL 编码不需要的字符. 该过滤器与 urlencode() 函数很类似. Name: "encoded" ...

  8. PHP ftp_cdup() 函数

    定义和用法 ftp_cdup() 函数把当前目录改变为 FTP 服务器上的父目录. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE. 语法 ftp_cdup(ftp_connection ...

  9. 概率——17icpc西安

    不知道为什么是这样子的.. #include<bits/stdc++.h> using namespace std; int m,n; int main(){ while(scanf(&q ...

  10. input限制字符长度 - composition

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...