• vue路由vue-router


    1.同步路由

      a.引入你想跳转的文件 import payment from './app/payment'

      b.在路由里配置你的页面

      const router = new VueRouter({
       routes: [
      {name:'payment',path:'/payment',component: payment} //path里的路径是指你浏览器显示的路径(例如http://localhost:9000/#/payment)
      })
     c.调用你的路由(我的实例代码是写在一个方法里的)
      
    payMent(){
       var obj={total:this.totalPrice}

        router.push({
           name:"payment",
         params:obj //如果需要传参时写(这必须传对象,不然界面会获取不到你想要传的值
    ) 调用传过来的参数 TitleValue: this.$route.params.item.name,
        })
       }
    2.异步路由
      使用异步路由不需要引入文件,也就是同步路由中的a步骤不需要,
      a.配置你要跳转的界面路由
        const router = new VueRouter({
          routes: [{name:'payment',path:'/payment',component:(resolve)=>{
      
            require.ensure(['./app/payment'],()=>{

              resolve(require('./app/payment'))
              })
       }},

       ],
      })
    3.动态路由的配置
    const User = {
      template:'<div>User</div>'  
    }
    
    const router = new VueRouter({
       routes:[
          //动态路径参数,以冒号开头
          {path:'/user/:id',component:User}    
        ] 
    })
       <router-link to="/user/bar">/user/bar</router-link> 
    
    

    可以在路由中设置多段路径参数,对应的值会设置到$route.params中

    模式 匹配路径 $route.params
    /user/:username /user/evan {username:'even'}
    /user/:username/post/:post_id /user/evan/post/123 {username:'even',post_id:123}

    当两个路由使用同一组件的时候,切换时原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

    4.嵌套路由

    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
               }
             ]
          }    
       ]
    })
      要注意,以/开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径

    5.命名路由

    const router = new VueRouter({
        routers: [
           {
             path: '/user/:userId',
             name: 'user',
             component:User 
           }
         ] 
    })
    
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
    
    router.push({ name: 'user', params: { userId: 123 }})

    6.编程式的导航

    声明式 编程式
    <router-link :to=''>

    router.push()  //window.history.pushState

    router.replace()//window.history.replaceState

    导航到不同的url时,router.push方法会向history栈添加一个新的记录,所以,当用户点击浏览器后腿按钮时,则回到之前的url。router.replace()跟push很像,但是它不会向history添加新记录,而是跟它的方法名一样替换掉当前的history记录

    //字符串
    router.push('home')
    //对象
    router.push({path:'home'})
    //命名的路由
    router.push({name:'user',params:{userId:123}})
    //带查询参数,生成/register?plan=private
    router.push({path:'register',query:{plan:'private'}})
    
    

    router.go(n)类似于window.history.go(n)

    //在浏览器记录中前进一步,等同于history.forward()
    router.go(1)
    //后退一步记录,等同于history.back()
    router.go(-1)
    //前进3步记录
    router.go(3)

    7.命名视图

    不写名字的默认为default,使用时components(带上s)

    <router-view class="view one"></router-view>
    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>
    const router = new VueRouter({
     routes:[
      {
        path:'/',
        components:{
          default:Foo,
           a:Bar,
           b:Baz
         }
      }
     ]
    })    

    8.重定向

    /a重定向到/b
    const router = new VueRouter({
       routes: [
         {path:'a',redirect:'/b'}
       ]
    })
    
    //重定向的目标也可以是一个命名的路由
    const router = new VueRouter({
      routers: [
        {path:'/a',redirect:{name:'foo'}} 
      ]
    })
    //也可以是一个方法,动态返回重定向目标
    const router = new VueRouter({
    routes: [
    {path:'/a',redirect: to =>{
    //方法接收目标路由作为参数
    //return 重定向的字符串路径/路径对象
    }}
    ]
    })

    9.别名

    
    
    const router =new VueRouter({
      routes:[
        {path:'/a',component:A,alias:'/b'}
       ]
    })
    
    

    10.导航钩子:路由发生变化是触发

    钩子方法的参数介绍:

    1.to(route):即将要进入的目标路由对象

    2.from(route):当前导航正要离开的路由

    3.next(Function):一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数(确保要调用next方法,否则钩子就不会被resolved)

       3.1.next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed(确认的)

       3.2.next(false):中断当前的导航。如果浏览器的URL改变了(可能是用户手动或浏览器后腿按钮),那么URL地址会重复到from路由对应的地址

       3.3.next('/')或next({path:'/'}):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航

    全局钩子

    const router = new VueRouter({})
    router.beforeEach((to,from,next)=>{})
    同样可以注册一个全局的after钩子,不过它不像before钩子那样,它没有next方法
    router.afterEach(route=>{})

    某个路由独享的钩子

    const router = new VueRouter({
       routes:[
         {path:'/foo',
           component:Foo,
          beforeEnter:(to,from,next)=>{}
         }
       ]
    })

    组件内的钩子

    beforeRouteEnter:它不能访问this,因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建,。不过你可以通过传一个回调给next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数

          beforeRouteEnter(to,from,next){next(vm=>{//通过vm访问组件实例})}

    beforeRouteUpdate

    beforeRouteLeave:直接访问this。这个leave钩子通常用来禁止用户在还未保存修改之前突然离开。可以通过next(false)来取消导航

    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
      }
    }

    路由元信息:详细查看API

    11.过渡动效

    全局:

    <transition>
      <router-view></router-view>
    </transition>

    单个路由的过渡:需设置不同的name

    const Foo = {
       template:`<transition name="slide">
                         <div class="foo"></div>
                       </transition>
                     `
    }
    
    const Bar= {
       template:`<transition name="fade">
                         <div class="bar"></div>
                       </transition>
                     `
    }

    基于路由的动态过渡

    //使用动态的transition name
    <transition :name="transitionName">
       <router-view></router-view>
    </transition>
    
    //接着在父组件内
    //watch $route 决定使用哪种过渡
    watch:{
       '$route'(to,from){
            const toDepth = to.path.split('/').length
            const fromDepth = from.path.split('/').length
            this.transitionName = toDepth<fromDepth ? 'slide-right' : 'slide-left'
       }
    }

     数据获取

    12.滚动行为:vue-router可以让你自定义切换时页面如何滚动(注意:这个功能只在html5 history模式下可用)

    滚动的方法scrollBehavior:

      接收的参数:路由对象(to from),第三个参数savedPosition当且仅当popstate导航(通过浏览器的前进/后退按钮触发)时才可用

         savedPosition方法返回滚动位置的对象信息:

          {x:number,y:number}   {selector:string}  (如果返回一个布尔假值,或空对象,就不会发生滚动)  

     
    使用例子:
    const router = new VueRouter({
       routes:[...],
       scrollBehavior(to,from,savedPosition){
           //return 期望滚动到哪个的位置
       } 
    })
    
    不会发生滚动的例子:
    scrollBehavior(to,from,savePosition){
      return {x:0,y:0}  
    }
    
    按下前进/后退时:
    scrollBehavior(to,from,savedPosition){
     if(savePosition){
       return savedPosition
     }else{
        return {x:0,y:0}
     }
    }
    
    模拟滚动到锚点的行为:
    scrollBehavior(to,from,savedPosition){
      if(to.hash){
        return{
           selector:to.hash
        }
      }
    }
    
    

    13.路由懒加载:结合Vue的异步组件和webpack的code splitting feature,实现路由组件的懒加载

    
    
     
  • 相关阅读:
    学习Java的Day02
    学习Java的Day01
    多线程的了解
    几个MQ的区别
    HTML5——存储(cookie、localStorage、sessionStorage)的区别
    dubbo mock配置
    Springboot分布式,excel导出,运用POI导出,前端用的jsp
    oracle 添加字段和添加注释
    可以重复的Map:IdentityHashMap
    数组转list问题
  • 原文地址:https://www.cnblogs.com/cxdxm/p/6652674.html
Copyright © 2020-2023  润新知