vue+iview项⽬+源码+项⽬图⽚+部分路由官⽹精简毒⽛君 If you don’t work hard, who will help you.
Vue的路由vue-router@3.0+
vue-router在vue中充当⼀个⾮常强⼤的⾓⾊。通过vue-router，vue可以更加⽅便的进⾏路由控制。开发者可以通过vue-router+Vue实现⼀个强⼤的单页⾯的应⽤。
Vue脚⼿架搭建项⽬的指令：vue init webpack 项⽬名称
基础路由的构成
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({  //实例化⼀个路由对象
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
在它原有的基础上动⼀下，是的代码更加的简洁
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: () => import('@/components/HelloWorld')  // 改变引⼊的⽅式，减少引⼊组件的不便
}
]
})
当然在很多时候路由都是公⽤的⼀个页⾯可以提供给不同的⾓⾊参数使⽤。
1. 可以通过组件封装；
2. 可以通过路由配置（动态路由）；
动态路由在相同路由之间切换是不会有history的变化所以 浏览器的返回键不会如愿以尝的返回你想返回的页⾯。
动态路由的变化可以通过watch监听得到，也可以通过vue-router的beforeRouteUpdate进⾏监听。
通过watch监听
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
或
通过vue-router的beforeRouteUpdate进⾏监听
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// 当路由发⽣改变...
// 不要忘记使⽤next()
}
}
vue-router导航守卫经常⽤到的情况之⼀就是：登录权限验证和组件内部内容权限的验证，只有当⽤户满⾜⼀定的条件才能进⾏登录和进⾏部分内容的访问和操作。当然，如果路由route寻不到页⾯的时候，应⽤通常需要返回404页⾯以告诉⽤户当前访问的页⾯不存在，这样你的应⽤的⽤户感知会更加的
好。
通常使⽤通配符*来配置404页⾯的访问，当然通配符必须配置在所有路由的后⾯，以保证路由展⽰正确。
如果要配置500页⾯，可以使⽤$route.push({ path: '500' })进⾏访问
进阶版导航守卫
“导航”表⽰路由正在发⽣改变
vue-router总共有三个全局守卫，分别是：beforeEach, beforeResolve, afterEach。
beforeEach:
const router = new Router({ ... })
router.beforeEach((to, from, next) => {
// to 将要进⼊的页⾯
// from 即将离开的页⾯
// next 必须配置的 next(false)路由跳转; next({ path: `跳转路由的path值` })
// TODO
})
beforeResolve:
const router = new Router({...})
router.beforeResolve((to, from, next) => {
// 跟beforeEach类似
// 区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调⽤。
})
afterEach:
const router = new Router({...})
router.afterEach((to, from) => {
// to 进⼊的页⾯
// from 进⼊前的页⾯
})
组件内守卫同样也有三个：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave beforeRouteEnter
export default {
name: '...',
beforeRouteEnter(to, from, next) {
// 不能使⽤this，因为该组件在这时候还没有实例化
}
}
beforeRouteUpdate
export default {
name: '...',
beforeRouteUpdate(to, from, next) {
// 能使⽤this，组件此时已经被实例化
//当前路由被复⽤的时候调⽤，例如：/user/:id => // /user/1 and /user/2
}
}
beforeRouteLeave
export default {
name: '...',
beforeRouteLeave(to, from, next) {
// 即将离开当前路由时触发
// 能使⽤this，组件此时已经被实例化
}
}
/**
--> 导航被触发。
404页面网站源码--> 在失活的组件⾥调⽤离开守卫。
--> 调⽤全局的 beforeEach 守卫。
--> 在重⽤的组件⾥调⽤ beforeRouteUpdate 守卫 (2.2+)。
--> 在路由配置⾥调⽤ beforeEnter。
-
-> 解析异步路由组件。
--> 在被激活的组件⾥调⽤ beforeRouteEnter。
--> 调⽤全局的 beforeResolve 守卫 (2.5+)。
--> 导航被确认。
--> 调⽤全局的 afterEach 钩⼦。
--> 触发 DOM 更新。
--> ⽤创建好的实例调⽤ beforeRouteEnter 守卫中传给 next 的回调函数。
*/
路由过渡
transition
<transition name=`⾃⼰配置值`> // 有`slide`, `fade`等等
<router-view></router-view>
</transition>
vue⽣命周期（在这个周期内，this都可以调⽤）
循序排列 开始 —> 结束beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。