Vue--路由问题2

之前已经对router问题有了个简单的介绍，这里再明确一些使用过程中的router问题

本文介绍的主要还是vue2.x中的设置

在vue2.x中，如果路由发生变化，可以通过以下方式监测路由变化

watch:{
'$route':(to,from){
		this.id=to.param.id
}
}

路由导航

router-link用于控制路由的跳转

<router-link to="/normal">home</router-link>

<router-link :to="{name:'Home'}">home</router-link>

写名称的优势，当路径变更时可以还是用之前的路由名称

路由导航是用于控制路由跳转的

之前介绍过，激活路由的默认类是router-link-active，激活路由的样式，因此可以通过设置以下类
.router-link-active{}改变默认样式，也可以通过 active-class属性

<router-link :to="{name:'Home'}" active-class=“myClass”>home</router-link>

路由传参

传参方式1

this.$router.push({
name:'home',
params:{
param1,param2
}
})

传参方式2

<router-link :to="{name:'Home',params:{
param1:param1,
param2:param2
}">home</router-link>

获取路由参数

获取方式1

const {param1,param2}=this.$router.params

获取方式2

在路由文件中

{
    path: "/contry/:city/:user",
    component: Index
    props:true,//可以直接在props中获取参数
  },

路由视图

关于路由视图再做个简要说明

具名路由视图

<router-view name="sidebar"></router-view>

默认路由视图

<router-view"></router-view>

路由视图是用于展示具体的路由页面文件的

  {
    path: "/home",
    name:"Home",
    components: {
      default:Index,//默认router-view
      sidebar:Index//具名router-view
    }
  }

    <template>
      <div id="main">
          <div class="sidebar">
            <router-view name="sidebar"></router-view>
          </div>
          <div class="content">
            <router-view></router-view>
          </div>
      </div>
    </template>

并且通过以上方式非常容易设置页面的布局

设置每个路由的具体的控制

//设置进入路由前的操作
{
    path: "/contry/:city/:user",
    component: Index
    props:true,//可以直接在props中获取参数
beforeEnter(to,from,next){
          //to.params
          //next(false)是否跳转
    }
}

//设置离开路由前的操作
beforeRouteLeave(to,from,next){}