当从不同组件进入同一个组件的时候,想要做对不同组件做出对应的改变使用
watch: {
'$route' (to, from) {
// 对路由变化作出响应 写对应的业务逻辑即可...
}
}
或者
beforeRouteUpdate (to, from, next) {
// 对路由变化作出响应 写对应的业务逻辑即可...
// don't forget to call next()
//想进入下个路由调用next();
}
复制代码
路由钩子函数的用处
router.beforeEach((to, from, next) => {
let memberRole = Vm.$cookie('memberRole');
//在全局定一个权限判断的钩子,通过获取的cooike值来判断身份
Vm.$bus.memberRole = memberRole;
if(to.fullPath==='/memberRole'){
if(memberRole==='1'){
//超管
next({ path: '/superAdmins' })
// vueRouter.push({name: '/superAdmins'})
}else if(memberRole==='2'){
//平台
next({ path: '/platformPrent' })
// vueRouter.push({name: 'login'})
}else if(memberRole==='3'){
//商家
next({ path: '/superPrent' })
}else{
// vueRouter.push({name: 'login'})
//普通用户
next()
}
}else{
next()
}
});
router.afterEach((to, from) => {
// 同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用
})
//独享守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ... 只针对foo进行监听
}
}
]
})
//组件内的路由钩子
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
//进入前实例前阶段
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
//从不同路由跳转来的监听
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
总结 路由钩子就是用来判断不同状态的一种手段。类似看门的有啥事可以先问他,由他转告之后才能进行操作
复制代码
官方解释的解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
实际开发根本用不上,但是面试的毛病多爱问,想答就答不想答就不答,爱咋咋地
路由嵌套
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
复制代码
主要做后台系统不同角色嵌套的子集
路由懒加载
const Foo = () => import('./Foo.vue')
//分块懒加载
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
对于优化项目比较有用,分块懒加载,打包好拆分
复制代码
vue-router路由的两种模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
和后台配合更改配置,如果使用ssr的时候需要用到这种模式。线上环境最好也改成这样看起来比较好用户输入带井号很丑。
history路由模式与后台的配合
# nginx
location / {
try_files $uri $uri/ /index.html;
}
# node
const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})
复制代码
vue-router的动态路由匹配以及使用
路由的动态匹配有很多种,可以通过跳转到路由所传的参数来动态改变路由状态,可以通过导航守卫监听路由状态,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。
{
// 会匹配所有路径
path: '*'
}
{
// 会匹配以 `/user-` 开头的任意路径
path: '/user-*'
}
复制代码
router-link组件及其属性
1.":to" 属 性
相当于a标签中的"herf"属性,后面跟跳转链接所用
Home
Home 2."replace" 属 性
replace在routre-link标签中添加后,页面切换时不会留下历史记录
3."tag" 属 性
具有tag属性的router-link会被渲染成相应的标签
Home
Home 此时页面的li同样会起到a链接跳转的结果,vue会自动为其绑定点击事件,并跳转页面4."active-class" 属 性
这个属性是设置激活链接时class属性,也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性
Home active-class属性的默认值是router-link-active,所以如果没有设置,就会被渲染为这个class
可以在router.js里面设置
const router = new VueRouter({ mode: 'hash', linkActiveClass: 'u-link--Active', // 这是链接激活时的class }) 5."exact" 属 性
开启router-link的严格模式
home 上面这个标签如果不加exact属性,则会在vue2.leenty.com/article页面下也会被匹配到, 这却不是我们的本意,在加了这个属性后就会正确的匹配到vue2.leenty.com下
路由传参
1,this.$router.push({ path: '/news', query: { userId: 123 }}); this.$route.query.userId
2, <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link> <router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>
3,props: ['id'],传参,可以使用对象,布尔,函数模式 耦合性降低
复制代码