vue路由归纳

vue路由的原理

单页面的一大优势就是,无刷新跳转页面,用户体验好,加载速度快。vue路由的跳转它是无刷新的,共有两种模式,可以通过路由配置文件中去配置mode字段,如果不去配置这个mode字段,默认路由跳转就为hash模式。

hash模式,通过在链接后面添加”#”号+路由名字,匹配这个字段的变化去触发hashchange事件,动态的渲染出页面。

另外一种模式为history模式,即使用浏览器的historyAPI,pushStatereplaceState。通过调用pushState去操作浏览器的history对象,改变当前链接地址,同时结合window.onpopstate监控浏览器的返回前进事件,同样可以实现无刷新的跳转页面。replaceStatepushState的区别就是,前者代表替换,后者代表插入。

history相对于hash,就是没有”#”号,看着十分清爽。但是用hash模式的反而较多,为什么呢?因为history模式还需要后端的配置,否则刷新页面就会返回404。

vue路由两种传参

页面传参就两种,paramsquery,params是以/params方式展示,query是以/?query=方式展示。写法大致都是相同,不过query是用path来引入,而params是用name来引入。注意:接收参数的时候是用route而不是routerquery像是ajax中的get,而params更像是post,刷新页面时params参数会丢失,而query参数不会丢失。

1
2
3
4
5
6
7
8
9
10
11
12
13
//query
this.$router.push({
path:"/abc",
query:{id:id}
});
//params
this.$router.push({
name:"abc"
params:{id:id}
});
//接收参数
this.$route.query.name
this.$route.params.name

vue路由跳转

vue 路由的跳转分成两种,一种是声明式,使用<router-link>声明跳转,to属性定义跳转的参数。另一种是编程式,使用 router.go()router.push()router.replace()方法进行跳转,go方法就是与浏览器的history api 的方法相同,可以进行返回上一页等操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 字符串
router.push('home')

// 对象
this.$router.push({path: 'home'})

//命名的路由
this.$router.push({name: 'user', params: {userId: 123}})

// 带查询参数,变成/register?plan=private
this.$router.push({path: 'register', query: {plan: "private"}});

//声明式
<router-link :to="{name:'abc',params:{id:id}}"></route-link>

vue路由守卫

vue路由守卫分3种,一种是全局路由守卫,通常在实例化路由之后设置,做通用路由的设置,它所有的路由跳转全部都会执行的操作;一种是单独的路由独享守卫,在单个路由定义的时候设置,所有跳转到这个路由的都会执行,一种是组件内的路由守卫,只在组件内生效。

全局路由守卫:

  • router.beforeEach(to,from,next)
  • router.afterEach(to,from,next)

路由独享守卫:

  • beforeEnter(to,from,next)

组件内守卫:

  • beforeRouteEnter(to,from,next)
  • beforeRouteUpdate(to,from,next) //动态参数路径改变时,组件实例被复用的时候调用
  • beforeRouteLeave(to,from,next) //导航离开组件所在路由时被调用
打赏
  • © 2019-2022 YmTonny
  • 访问量: 独立访客:

请我喝杯咖啡吧~

支付宝
微信