vue路由属性

路由属性

路由传参

• 两种导航传参方式,传递查询字符串参数。

<router-link to="/detail?a=1&b=2&id=1122">小米10</router-link>
<script>
goToDetail(){
   this.$router.push({  path:'/detail', query:{ a:22,b:33 } } ) //对象形式
   this.$router.push('/detail/a=11&b=33') //路径形式
}
</script>

• 接收页面使用 $route.query接收

 this.$route.query 

动态路由

• 修改路由配置

{ path:'/list/:type/:name',component:list }//冒号后为变量

<!--页面跳转方式 -->
    <router-link to="/list/2/手机">列表页-手机</router-link>
    <router-link to="/list/5/沙发">列表页-沙发</router-link>
<script>
goToList(type,name){
      this.$router.push( `/list/${type}/${name}` )
    }
</script>

• 接收页面使用 $route.params接收动态路由。

this.$route.params 

命名路由 （name）

• 修改router/index.js中的路由配置

{ 
      path:'/detail',
      component:detail,
      name:'detail'
}

<!--页面跳转方式 -->
<router-link :to="{ name:'detail',params:{ type:8,name:'上衣' }}">列表页-上衣</router-link>
<script>
goToList(type,name){
   this.$router.push( { name:'detail',params:{ type:type,name:name } } 
    }
</script>

命名视图-了解

一般情况下，component为当组件页面时，会在路由出口中渲染，但想渲染多个页面组件到一个页面时需要components:{}.

• 当匹配到 /login路由时，那么 login组件会渲染到默认的出口，而order组件渲染到名称为aa的路由出口,即两个页面组件。

{ 
      path:'/login',
      components:{
        default:login,
        aa:order 
      }
}

<!-- 路由出口 :默认定义名称就是默认default -->
    <router-view></router-view>
    <router-view name="aa"></router-view>

路由元信息 （meta）

• 修改路由配置

	{ 
          path:'my',
          component:my,
          meta:{
            title:'个人中心'
          }
         },
        { 
          path:'cates',
          component:cates,
          meta:{
            title:'分类'
          }
         }

• 获取元素信息

this.$route.meta

懒加载

我们vue是单页面应用，首屏加载可能会很慢，因为第一次打开，会加载所有的资源所以很慢。解决懒加载。

• 不直接引入页面组件。

let a = () => import("../pages/a/a.vue")
let b=()=>Promise.resolve(import("../pages/b/b.vue"))

 { path:'a',component:a}
//或
 { path:'a',component:() => import("../pages/a/a.vue")}

导航守卫

全局守卫

全局守卫：全局路由设置

router.beforeEach((to,from,next)=>{}) //所有路由进来之前 登录拦截
router.afterEach((to,from)=>{}) //所有路由进来之后 : 了解

//需求：只有登录才能访问，未登录则跳转到/login

// 所有路由进来之前 登录拦截   以及后台系统就会在这里判断是否登录
router.beforeEach( (to,from,next)=>{
      //to : 你想到哪，你想访问哪个路径
      //from : 来自于哪
      //next() 放行
      if( to.path == '/login' ){ //如果访问login，则直接放行
        next()
      }
      if( localStorage.getItem('username') ){ //有值代表登录了。
        next()
      }
} )

router.afterEach((to,from)=>{//所有路由进来之后  ： 了解
  console.log( 'afterEach' )
})

路由独享守卫

路由独享守卫：每个路由里面设置。

beforeEnter(to,from,next){} //守卫path

{
      path: '/list/:type/:name',
      component: list,
      name: 'aaa',
      //假设只除0 角色外的人才能进
      beforeEnter(to, from, next) {
        if( localStorage.getItem('membertype') != '0' ){
          next()
        }else{
          alert('请充值')
        }
      }
    },

组件守卫

组件内部守卫：每个组件里面设置。

• beforeRouteEnter(to,from,next){} 路由进来之后，组件实例创建之前。无实例this.,通过next回调拿到实例this.

• beforeRouteUpdate(to,from,next){} 路由更新之后，组件实例创建之前。

• beforeRouteLeave(to,from,next){} 路由离开之前 : 了解

• beforeRouteEnter 创建之前

 beforeRouteEnter(to, from, next) { 
    //路由进来之前
    //console.log('进来之前',this) //页面组件还未创建，比beforeCreate还早 
    //根据用户的角色，展示不同的价格
    next((vm) => {
      console.log(vm, "在这里可以访问到this实例");
      vm.membertype = localStorage.getItem("membertype");
    });
  }

• beforeRouteUpdate 路由更新

 <h2>猜你喜欢</h2>
    <router-link to="/list/2/手机">列表页-手机</router-link> | 
    <router-link to="/list/9/电脑">列表页-电脑</router-link> | 

 beforeRouteUpdate(to,from,next){ //路由更新之前
    console.log('路由更新了')
    console.log( to.params,'在这里重新发送ajax' ) //因为这里是动态路由，都是list因此组件不会重新创建，所以只能每次路由更新后重新发送ajax请求，就在这里发送。
    next()
  }

滚动处理

const router = new VueRouter({
  //滚动处理
  scrollBehavior(to,from,savePosition){
    //如果保存了位置，就返回保存的地方；否则，返回到(0，0)
    if(savePosition){
      return savePosition
    }else{
      return {x:0,y:0 }
    }
  }
})