Vue路由传参总结路由传参之params + 模板字符串 1. 在父组件Messages.vue当中准备数据msg

路由传参之params + 模板字符串

1. 在父组件Messages.vue当中准备数据msgList

2. 使用循环的方式来生成对应的router-link链接

并在to的路径上面，以模板字符串的方式进行params参数拼接

3. 在router/index.js路由当中，对路径一定要设置占位功能以此来接收对应的参数

4. 在子组件MessagesDetail.vue当中，可以使用$route.params.xxx来获取相应参数

为了使用简单一些，可以在子组件中使用计算属性进行精简

//父组件
<template>
  <div>
    <h2>Messages</h2>
    <ul>
      <li v-for="msg in msgList" :key="msg.id">
        <router-link :to="'/messages/' + msg.id">{{msg.title}}</router-link>&nbsp;&nbsp;
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msgList: [
        { id: 1, title: 'Message 1', content: 'Content 1' },
        { id: 2, title: 'Message 2', content: 'Content 2' },
        { id: 3, title: 'Message 3', content: 'Content 3' }
      ]
    }
  }
}
</script>

//路由配置 router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import MessagesDetail from '@/components/MessagesDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/messages/:id',
    name: 'messagesDetail',
    component: MessagesDetail
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

//子组件 MessagesDetail.vue：
<template>
  <div>
    <h2>Message Detail</h2>
    <p>ID: {{id}}</p>
    <p>TITLE: {{title}}</p>
    <p>CONTENT: {{content}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      return this.$route.params.id
    },
    title() {
      const msg = this.getMsgById(this.id)
      return msg.title
    },
    content() {
      const msg = this.getMsgById(this.id)
      return msg.content
    }
  },
  methods: {
    getMsgById(id) {
      // 模拟异步获取数据
      return this.$parent.msgList.find(msg => msg.id == id)
    }
  }
}
</script>

路由传参之params + 命名路由

1. 在使用命名路由的时候，好处是不管路径有多长，只需要添加name:路由名即可

2. 在传递参数的时候，由于传递的是params参数，因此也可以添加此属性

//父组件
<template>
  <div>
    <h2>Messages</h2>
    <ul>
      <li v-for="msg in msgList" :key="msg.id">
        <router-link :to="{ name: 'messagesDetail', params: { id: msg.id } }">{{msg.title}}</router-link>&nbsp;&nbsp;
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msgList: [
        { id: 1, title: 'Message 1', content: 'Content 1' },
        { id: 2, title: 'Message 2', content: 'Content 2' },
        { id: 3, title: 'Message 3', content: 'Content 3' }
      ]
    }
  }
}
</script>

//路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import MessagesDetail from '@/components/MessagesDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/messages/:id',
    name: 'messagesDetail',
    component: MessagesDetail
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

//子组件
<template>
  <div>
    <h2>Message Detail</h2>
    <p>ID: {{id}}</p>
    <p>TITLE: {{title}}</p>
    <p>CONTENT: {{content}}</p>
  </div>
</template>

<script>
export default {
  props: ['id'],
  computed: {
    title() {
      const msg = this.getMsgById(this.id)
      return msg.title
    },
    content() {
      const msg = this.getMsgById(this.id)
      return msg.content
    }
  },
  methods: {
    getMsgById(id) {
      // 模拟异步获取数据
      return this.$parent.msgList.find(msg => msg.id == id)
    }
  }
}
</script>

路由传参之params + 命名路由 + props:true

1. 父组件的设置同上

2. 在路由规则对象中添加一个属性 props:true

3. 在子组件中也要使用props来接收传递过来的数据

此时在子组件当中，就不用写计算属性来精简代码了

//父组件
<template>
  <div>
    <h2>Messages</h2>
    <ul>
      <li v-for="msg in msgList" :key="msg.id">
        <router-link :to="{ name: 'messagesDetail', params: { id: msg.id } }">{{msg.title}}</router-link>&nbsp;&nbsp;
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msgList: [
        { id: 1, title: 'Message 1', content: 'Content 1' },
        { id: 2, title: 'Message 2', content: 'Content 2' },
        { id: 3, title: 'Message 3', content: 'Content 3' }
      ]
    }
  }
}
</script>

//router
import Vue from 'vue'
import VueRouter from 'vue-router'
import MessagesDetail from '@/components/MessagesDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/messages/:id',
    name: 'messagesDetail',
    component: MessagesDetail,
    props: true
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

//子组件
<template>
  <div>
    <h2>Message Detail</h2>
    <p>ID: {{id}}</p>
    <p>TITLE: {{title}}</p>
    <p>CONTENT: {{content}}</p>
  </div>
</template>

<script>
export default {
  props: ['id', 'title', 'content'],
  computed: {
    msg() {
      return {
        id: this.id,
        title: this.title,
        content: this.content
      }
    }
  },
  methods: {
    getMsgById(id) {
      // 模拟异步获取数据
      return this.$parent.msgList.find(msg => msg.id == id)
    }
  }
}
</script>

路由传参之query参数 + 命名路由 + props(函数)

1. 父组件准备数据

2. 在路由当中，写原来默认的路径和路由名称并添加一个props属性

3. 此props属性是一个函数，可以在内部写对应的业务逻辑

4. 还可以额外的添加属性

     ```js
     //父组件
     <template>
       <div>
         <h2>Messages</h2>
         <ul>
           <li v-for="msg in msgList" :key="msg.id">
             <router-link :to="{ name: 'messagesDetail', query: { id: msg.id } }">{{msg.title}}</router-link>&nbsp;&nbsp;
           </li>
         </ul>
       </div>
     </template>
     <script>
     export default {
       data() {
         return {
           msgList: [
             { id: 1, title: 'Message 1', content: 'Content 1' },
             { id: 2, title: 'Message 2', content: 'Content 2' },
             { id: 3, title: 'Message 3', content: 'Content 3' }
           ]
         }
       }
     }
     </script>
     
     ```

//router
import Vue from 'vue'
import VueRouter from 'vue-router'
import MessagesDetail from '@/components/MessagesDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/messages/detail',
    name: 'messagesDetail',
    component: MessagesDetail,
    props: route => ({ ...route.query, school: '宝安大学' })
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

//子组件
<template>
  <div>
    <h2>Message Detail</h2>
    <p>ID: {{id}}</p>
    <p>TITLE: {{title}}</p>
    <p>CONTENT: {{content}}</p>
    <p>SCHOOL: {{school}}</p>
  </div>
</template>

<script>
export default {
  props: ['id', 'title', 'content', 'school']
}
</script>

Vue路由传参总结

路由传参 之params + 模板字符串

路由传参之params + 命名路由

路由传参之params + 命名路由 + props:true

路由传参之query参数 + 命名路由 + props(函数)

路由传参之params + 模板字符串