Vue Router高级
路由组件传参
通过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高级的更多相关文章
- vue Router——基础篇
vue--Router简介 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路 ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- vue路由高级用法
五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',r ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- 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 ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
随机推荐
- Arch安装墨刀(产品原型工具)
Arch通过aur安装墨刀的时候报错,查看PKGBUILD发现下载地址错误("https://s3.cn-north-1.amazonaws.com.cn/modao/download&qu ...
- 前端学习(二十一)初识h5(笔记)
html5 主要目标:语义化!可以被人或者机器更好的阅读! 支持各种媒体的嵌入!不兼容低版本!------------ html5新标签: 普通: <header clas ...
- python输入问题
1.关于python的输入问题: 在2.x版本单行单输入input,单行多输入raw_input 在3.x版本中就已经没有raw_input,只有input,单行单输入多输入都可以. 类似2 3 4的 ...
- 使用Git实现Laravel项目的自动化部署
简介 不知道大家一开始是怎么使用 git 进行开发的,反正我个人是先将代码提交到 github 仓库,然后用 SSH 登录到服务器,然后进行克隆或者版本更新.听起来就很麻烦,当然实际操作中也很麻烦,那 ...
- go垃圾回收
go垃圾回收 当创建一些变量时,变量有一个确定的生命周期.例如函数中定义的局部变量,当函数退出时变量就不存在了.另外在其他情况下,至少对于编译器来说,这不是那么的明显.例如,某个被函数返回的变量的生命 ...
- Vuex 常规用法
背景 很多时候我们已经熟悉了框架的运用,但是有时候就是忘了怎么用 所以这里想记下大部分的框架使用方法,方便使用的时候拷贝 一.安装 npm 方式 npm install vuex --save yar ...
- 配置Redis集群为开机自启动
vim /etc/init.d/redisc 将下方脚本写入redisc文件中 #!/bin/sh # chkconfig: 2345 80 90 # # Simple Redis init.d sc ...
- C语言新手写扫雷攻略3
界面绘制好后,雷数也布置了,接下来就是游戏的运行过程了,今天先不说具体过程,再来看看需要用到的辅助函数 先是简单的画红旗,鼠标右键的功能是画红旗,至此我们都是在使用函数自己绘图,效率是低,但有助于理解 ...
- targetSdkVersion和与target属性的区别
参考:http://blog.csdn.net/dai_zhenliang/article/details/8175781 AndroidMenifest.xml中targetSdkVersion和p ...
- Sql生成 Insert 语句
declare @TableName sysname select @TableName = 'T_OOSOrder' declare @result varchar(max) = 'INSERT I ...