vue 技巧 props获取动态路由 路由去掉#/ wacth深度 路由传参

动态路由的值获取

可在动态路由对象里面再加一个属性，props:true。用于将动态值传到，相应使用的组件上。相应组件用props接收。
props的几种写法：

• 数组型：props: [‘title’, ‘likes’, ‘isPublished’, ‘commentIds’, ‘author’]
• 对象类型：props：{
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
  }
• props文档：https://cn.vuejs.org/v2/guide/components-props.html

路由的定向与去掉#

• 去掉#：

export default new Router({
  "mode":"history"
  })

• 定向用：redirect

export default new Router({
   routes:[{
     path:'/'
     redirect:'/join'// 这里就是首页展示的文件
   }]
 })

wacth 监听

    watch: {
    firstName: {
      handler(newName, oldName) {
        this.fullName = newName + ' ' + this.lastName;
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true,
      deep:true // 深度监听
    }
  }

router

• http://localhost:8080/#/index?name=1
  

   //  参数传递
  <router-link :to="{path:'/index',query: {name: id}}">
  // 接收参数
  this.$route.query.id

• 传参

https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F