vue-route

vue-route

vue-route详解
基础用法

//被vm实例所控制的区域
<router-link to="/user">user</router-link>
//路由占位符
<router-view></router-view>
//创建路由实例对象
const router = new VueRouter({
//所有的路由规则
  routes:[
     {path:'/',redirect:'/user'},  //路由重定向
     {path:'/user',component:User}
  ]
})
//创建vm实例对象
const vm = new Vue({
  el:"#app",
  data:{},
  router   //挂载路由实例对象
})

嵌套路由

const User = {
  template:`<div><router-link to="/user/tab1"></router-link> <router-view></router-view></div>`
}
const router = new VueRouter({
//所有的路由规则
  routes:[
     {path:'/',redirect:'/user'},  //路由重定向
     {path:'/user',component:User,children:[
       //子路由规则
           {path:'/user/tab1',component:Tab1}
      ]}
  ]
})

动态匹配路由基本用法

应用

const router = new VueRouter({
//所有的路由规则
  routes:[
     {path:'/',redirect:'/user'},  //路由重定向
     //动态路径参数，以冒号开头
     {path:'/user/:id',component:User}
  ]
})
const User = {
//路由组件中通过$route.params获取路由参数
  template:'<div>User {{$route.params.id}}</div>'
}

$route与对应路由形成高度耦合，不够灵活，所以使用props将组件和路由解耦
方式1 props的值为布尔类型

const router = new VueRouter({
//所有的路由规则
  routes:[
     {path:'/',redirect:'/user'},  //路由重定向
     //动态路径参数，以冒号开头
     {path:'/user/:id',component:User,props：true}
  ]
})
const User = {
props:['id'],//使用props接收路由参数
//路由组件中通过$route.params获取路由参数
  template:'<div>用户Id:  {{id}}</div>'  //使用路由参数
}

方式2 props的值为对象类型

const router = new VueRouter({
//所有的路由规则
  routes:[
     {path:'/',redirect:'/user'},  //路由重定向
     //动态路径参数，以冒号开头
     {path:'/user/:id',component:User,props：{name:'lisi'，age:12}}
  ]
})
const User = {
props:['name','age'],//使用props接收路由参数
//路由组件中通过$route.params获取路由参数
  template:'<div>用户Id:  {{id}}</div>'  //使用路由参数
}

方式3 props的值为函数类型

const router = new VueRouter({
//所有的路由规则
  routes:[
     {path:'/',redirect:'/user'},  //路由重定向
     //动态路径参数，以冒号开头
     {path:'/user/:id',
     component:User,
     props：route=>({name:'lisi'，age:12,id:route.params.id})}
  ]
})
const User = {
props:['name','age','id'],//使用props接收路由参数
//路由组件中通过$route.params获取路由参数
  template:'<div>用户Id:  {{id}}</div>'  //使用路由参数
}

编程式导航参数规则

router.push()方法的参数规则

router.push('/home')
router.push({path:'/home'})
router.push({name:'/user',params:{userId:123}})
router.push({path:'/register',query:{uname:"lisi"}})