美文网首页
Vue.js 路由学习!

Vue.js 路由学习!

作者: Null丶sleep | 来源:发表于2020-07-22 10:55 被阅读0次

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转

路由跳转

  • 以新的窗口模式跳转
getRegister() {
  const {href} = this.$router.resolve({
             path: `/register`
        });
      window.open(href, '_blank');
},
  • 声明式跳转
<router-link :to="...">
  • 编程式跳转
// 字符串
router.push('home')
// 对象
this.$router.push({path: '/login?url=' + this.$route.path});
// 带查询参数,变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
  • 不会返回的跳转 router.replace(location)
    设置 replace 属性(默认值: false)的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。加上replace: true后,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
//声明式:
<router-link :to="..." replace></router-link>
// 编程式:
router.replace(...)
//push方法也可以传replace
this.$router.push({path: '/home', replace: true})

路由传参

  • 使用query

    地址栏会暴漏传的参数

//存进去
this.$router.push({
  path: '/home',
  query: {
    site: [],
    bu: []
}
})
//取出来
this.$route.query.site
  • 使用params

    地址栏不会暴漏传的参数

//存进去
this.$router.push({
     name: `xxx`,
     params: {
     page: '1', code: '8989'
    }
  })
//取出来
this.$route.params.page
  • 路由拼接的方式

    在路由中写

{
path:'/one/reg/:num',
component:Reg,
}
//取出来
this.$route.params.num
  • 全局路由守卫
router.beforeEach((to, from, next) => {
    console.log(to) => // 到哪个页面去?
    console.log(from) => // 从哪个页面来?
    next() => // 一个回调函数
}
router.afterEach(to,from) = {}
  • 组件路由守卫
    跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
   // 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例
   next(vm => {})
}
beforeRouteUpdate (to, from, next) {
   // 同一页面,刷新不同数据时调用,
}
beforeRouteLeave (to, from, next) {
   // 离开当前路由页面时调用
}
  • 路由独享守卫

    路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({
    routes: [
       { path: '/',
         name: 'home',
         component: 'Home',
         beforeEnter: (to, from, next) => {// ...
          }
        }
    ]
})

相关文章

  • 大牛技术分享

    vue.js router--路由

  • Vue.js 路由

    本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过...

  • Vue-router

    Vue路由详解 一、Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,...

  • Vue.js 路由学习!

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得...

  • 2018-09-26

    一、 路由Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页W...

  • 路由、路由的嵌套、路由传参、axios

    一、 路由Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页W...

  • 路由、路由的嵌套、路由传参、axios

    一、 路由Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页W...

  • vue路由

    [vue路由的使用] ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单...

  • Vue学习笔记之路由(二)

    vue路由的使用 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页...

  • Vue.js路由router

    一、Vue.js简介 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现...

网友评论

      本文标题:Vue.js 路由学习!

      本文链接:https://www.haomeiwen.com/subject/eydzkktx.html