Vue路由跳转与接收参数的实现方式

Vue路由跳转与接收参数的实现方式可以通过以下步骤完成：

1. 安装 vue-router 插件

vue-router 是 Vue.js 官方的路由管理插件，需要先安装并在项目中引入。

可以使用 npm 进行安装，命令如下：

npm install vue-router --save

1. 创建路由对象

在项目中创建一个 router.js 文件，并在该文件中创建一个路由对象，例如：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

在上面代码中，定义了两个路由，分别是 / 和 /detail/:id，分别对应了 Home 和 Detail 组件。

其中 /:id 表示参数，接收参数的方式下一步进行讲解。

1. 跳转路由并传递参数

使用 router-link 组件实现路由跳转，并通过 to 属性指定路由路径。

例如，在 Home 组件中，通过 router-link 跳转到 Detail 组件，并传递参数 id：

<router-link :to="{name: 'Detail', params: {id: 123}}">详情</router-link>

在上面代码中，使用了对象的方式，其中 name 表示跳转的路由名称，params 表示要携带的参数，传递的参数为 {id: 123}。

1. 接收传递的参数

在 Detail 组件中，可以通过 $route 对象拿到传递过来的参数。

例如，在 Detail 组件中，可以通过以下方式获取传递的参数：

export default {
  name: 'Detail',
  methods: {
    getParams() {
      const id = this.$route.params.id
      console.log(id) // 输出：123
    }
  }
}

在上面代码中，通过 $route.params.id 获取传递的参数。

示例一：

下面是一个完整的示例，通过列表页跳转到详情页，并传递参数 id：

<!-- Home.vue -->
<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <router-link :to="{name: 'Detail', params: {id: item.id}}">{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      list: [
        {id: 1, title: '文章一'},
        {id: 2, title: '文章二'},
        {id: 3, title: '文章三'},
      ]
    }
  }
}
</script>

<!-- Detail.vue -->
<template>
  <div>
    <h2>{{title}}</h2>
    <p>{{content}}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Detail',
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    getDetail() {
      const id = this.$route.params.id
      axios.get(`/detail?id=${id}`).then(res => {
        this.title = res.data.title
        this.content = res.data.content
      })
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

在上面代码中，通过 $route.params.id 获取传递的参数，并通过 axios 发送请求获取对应的数据，最终渲染在页面上。

示例二：

下面是另一个示例，通过路由参数传递用户名和年龄，展示在用户中心页面：

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import router from '@/router'

export default {
  name: 'App',
  methods: {
    goToUserCenter() {
      const username = 'Jack'
      const age = 28
      router.push({name: 'UserCenter', params: {username, age}})
    }
  }
}
</script>

<!-- UserCenter.vue -->
<template>
  <div>
    <h2>{{title}}</h2>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  name: 'UserCenter',
  data() {
    return {
      username: '',
      age: ''
    }
  },
  created() {
    this.username = this.$route.params.username
    this.age = this.$route.params.age
  },
  computed: {
    title() {
      return `欢迎你，${this.username}，你的年龄是 ${this.age} 岁。`
    },
    content() {
      return '这是你的个人中心页面。'
    }
  }
}
</script>

在上面代码中，通过 router-link 跳转到 UserCenter 组件，并通过 params 传递参数，最终展示在页面中。