vue路由中动态路径参数/监控$route路由信息对象

责编:menVScode 2017-12-04 14:12 阅读(2118)

动态路劲

        匹配到的所有路由,全部映射到同一组件。路劲:/user/:userId,其中userId为动态路劲参数。

        获取参数:通过路由信息对象的 params 。

对组件注入

        通过在 Vue 根实例的 router 配置传入 router 实例;

        $router:router的实例对象;

        $route:当前激活的路由信息对象,每个组件实例都会有。一个路由信息对象表示当前激活的路由的状态信息,每次成功的导航后都会产生一个新的对象。

Object {
    fullPath:"/user/3#abc", //完整路劲
    hash:"#abc", //hash值
    matched:Array(1), //包含当前路由的所有嵌套路劲片段的路由记录。比如子路由可以得到父路由的信息
    meta:Object, //路由元信息,在路由配置中meta可以配置一些数据,用在路由信息对象中,使用$route.meta访问meta中的数据
    name:undefined,//当前路由的名字
    params:{ userId:"3"},//包含动态路由参数
    path:"/user/3",//对应当前路由的路劲
    query:Object,//URL查询参数
}

        beforeRouterEnter():进入组件前钩子函数;

        beforeRouterLeave():离开组件前钩子函数;

$route.meta

        在路由配置中除了定义path、component等属性,还可以通过 meta:{} 自定义我们想要的属性。

let router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',
  scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
    //console.log(to) // to:要进入的目标路由对象,到哪里去
    //console.log(from) // from:离开的路由对象,哪里来
    //console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
    /* if(savePosition) {return savePosition;}else{return {x:0,y:0}} */
    if(to.hash){ //先判断目标路由有没有hash值
      return {selector:to.hash}
    }
  },
  routes:[
    {
      path:'/', name:'index', component:Home,
      meta:{ index:0 }
    },
    {
      path:'/home',
      name:'Home',//name代表当前的路由
      component:Home,
      alias:'/index' //当访问'/index'的时候,就能匹配到当前的路由了。
    },
    {
      path:'/user/:tip?/:userId?',//?正则符号:userId/tip可以出现0次或者1次。这样就能匹配/user/vip/1或者/user
      name:'user',
      component:User,
      meta:{ index:1 }
    },
    {
      path:'/about', component:About,
      //meta:{ index:2 }, //meta写在这里获取不到index的值,要设置在‘/about’默认的子路由上
      children:[
            {
                path:'',//写''空值,代表默认子路由,相对于“/about”          
                component:Study,
                name:'About',
                meta:{ index:2 },
            }
        ]
    },
    {
      path:'/document',
      name:'Document',
      meta:{ index:3 },
      components:{ // 多个视图的时候,默认渲染default的视图。
        default:Document,
        slider:Slider,
        home:Home
      }
    }
  ]
})

        通过 $route.meta.index 来获取当前导航的下标。 

监控$route路由信息对象

watch:{
    $route(){//监控$route
        // console.log('监控$route:'+this.$route.params.userId)
        // 路径发生变化,$route会重新赋值,监控了这个属性,会执行这个函数
        this.getData()
    }
}


App.vue

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li>
          <router-link to="/" exact tag="div"  event="mouseover">home</router-link>
        </li>
        <li>
          <router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link>
        </li>
        <router-link to="/about" tag="li" event="mouseover">
          <i></i>
          <span>about</span>
        </router-link>
        <li>
          <router-link to="/user" exact event="mouseover">user</router-link>
        </li>
      </ul>
    </div>
    <div class="content f-cb">
      <router-view name="slider"></router-view> <!-- 命名视图 -->
      <router-view class="center"></router-view>
    </div>
  </div>
</template>

User.vue

<template>
  <div>
    我是user
    <hr>
    <div>
      <router-link :to='"/user/"+item.tip+"/"+item.id' key='index' v-for="item,index in userList" style="display:inline-block;padding:0 10px;margin:0 5px;">{{item.userName}}</router-link>
    </div>
    <dl style="line-height:26px;" v-if="userInfo.userName">
      <dd>姓名:{{userInfo.userName}}</dd>
      <dd>性别:{{userInfo.sex}}</dd>
      <dd>职位:{{userInfo.position}}</dd>
    </dl>
  </div>
</template>
<script>
  var data = [
        {id:1,tip:'vip',userName:"小明",sex:'男',position:'老师'},
        {id:2,tip:'vip', userName:"小红",sex:'女',position:'演员'},
        {id:3,tip:'common',userName:"小刚",sex:'男',position:'学生'}
    ]
  export default {
    data(){
      return {
          userList: data,
          userInfo:{}
      }
    },
    watch:{
      $route(){//监控$route
        // console.log('监控$route:'+this.$route.params.userId)
        // 路径发生变化,$route会重新赋值,监控了这个属性,会执行这个函数
        this.getData()
      }
    },
    created(){
      // 渲染这个组件会调用一次这个生命周期函数
      // 复用这个组件,这个函数不会再次被调用了
      // 地址一旦发生变化,$route会重新生成一个路由信息对象
      this.getData()
    },
    methods:{
      getData(){
        let id = this.$route.params.userId
        if(id){
          this.userInfo = this.userList.filter((item)=>{
            return id==item.id
          })[0]
        }else{
          this.userInfo = {}
        }
      }
    }
  }
</script>

router/index.js

let router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',
  scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
    //console.log(to) // to:要进入的目标路由对象,到哪里去
    //console.log(from) // from:离开的路由对象,哪里来
    //console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
    /*if(savePosition) {
      return savePosition;
    }else{
      return {x:0,y:0}
    }*/
  },
  routes:[
    ......
    {
      path:'/home',
      name:'Home',//name代表当前的路由
      component:Home,
      alias:'/index' //当访问'/index'的时候,就能匹配到当前的路由了。
    },
    {
      path:'/user/:tip?/:userId?',//?正则符号:userId/tip可以出现0次或者1次。这样就能匹配/user/vip/1或者/user
      name:'user',
      component:User
    },
    .....
  ]
})

        

        watch深度监控数据:http://www.menvscode.com/detail/5a00766510c98d0e654c1ba3


标签: 路由 $route vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码