Vue3之路由跳转与参数获取方式

下面是关于Vue3路由跳转与参数获取的完整攻略。

1. 安装Vue Router

在开始使用Vue3路由时，需要先安装Vue Router。可以通过npm安装，命令如下：

npm install vue-router@4.0.0-beta.8

安装完成后，在main.js中引入Vue Router并使用。

import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

createApp(App).use(router).mount('#app')

2. 创建路由信息

在路由的配置中需要设置路由的路径与对应的组件。下面是一个简单的路由信息示例：

import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

3. 路由跳转

路由跳转是指在浏览器中切换不同的路由，这可以通过<router-link>标签和router.push方法实现。

3.1 <router-link>标签

以下是一个简单的使用<router-link>标签的跳转方式：

<router-link to="/">Home</router-link>

to属性指定路由的路径。

3.2 router.push方法

在Vue3中，使用this.$router.push()方法实现路由跳转。以下是一个简单的路由跳转示例：

 methods: {
   goToAboutPage() {
     this.$router.push('/about')
   }
 }

4. 参数获取

路由参数是URL中的一部分，通常用于指定页面的特定内容或条件。在Vue3中，可以使用$route对象来获取路由参数。

4.1 获取参数

export default {
  mounted() {
    console.log(this.$route.params.id) // 获取路由参数
  }
}

在路由信息中，可以通过使用path-to-regexp匹配规则来获取参数，以下是一个带参数的路由信息示例：

const routes = [
  { path: '/:id', component: Product }
]

在组件中，通过this.$route.params获取参数值。

4.2 动态改变参数

在Vue3中，可以通过使用$router.push()方法并传递参数，来动态改变路由参数。以下是一个简单的路由参数动态改变示例：

methods: {
  changeRouteParam() {
    this.$router.push({ params: { id: 2 } })
  }
}

示例

示例1：路由跳转与参数获取

在以下实例中，点击一个商品，跳转到商品详情页面并展示当前商品的详细信息。

1. 创建路由信息

import ProductDetail from './views/ProductDetail.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/products/:id', component: ProductDetail, props: true }
]

2. 在Home页面中展示商品列表

<template>
  <div>
    <h2>Products</h2>
    <div v-for="product in products" :key="product.id">
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
      <button @click="goToProductDetailPage(product.id)">View Details</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Product A', description: 'Product A description' },
        { id: 2, name: 'Product B', description: 'Product B description' },
        { id: 3, name: 'Product C', description: 'Product C description' }
      ]
    }
  },
  methods: {
    goToProductDetailPage(id) {
      this.$router.push({ path: `/products/${id}`, props: true })
    }
  }
}
</script>

3. 在ProductDetail页面中展示当前商品的详细信息

<template>
  <div>
    <h2>{{ product.name }}</h2>
    <p>{{ product.description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  computed: {
    product() {
      return this.products.find(product => product.id == this.id)
    }
  },
  data() {
    return {
      products: [
        { id: 1, name: 'Product A', description: 'Product A description' },
        { id: 2, name: 'Product B', description: 'Product B description' },
        { id: 3, name: 'Product C', description: 'Product C description' }
      ]
    }
  }
}
</script>

示例2：动态改变路由参数

在以下实例中，点击一个按钮，动态切换路由参数。

1. 创建路由信息

import ProductDetail from './views/ProductDetail.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/products/:id', component: ProductDetail, props: true }
]

2. 在Home页面中展示商品列表

<template>
  <div>
    <h2>Products</h2>
    <div v-for="product in products" :key="product.id">
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
      <button @click="changeRouteParam(product.id)">View Details</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Product A', description: 'Product A description' },
        { id: 2, name: 'Product B', description: 'Product B description' },
        { id: 3, name: 'Product C', description: 'Product C description' }
      ]
    }
  },
  methods: {
    changeRouteParam(id) {
      this.$router.push({ params: { id } })
    }
  }
}
</script>

3. 在ProductDetail页面中展示当前商品的详细信息

<template>
  <div>
    <h2>{{ product.name }}</h2>
    <p>{{ product.description }}</p>
    <button @click="changeRouteParam()">Change Route Param to 2</button>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  computed: {
    product() {
      return this.products.find(product => product.id == this.id)
    }
  },
  data() {
    return {
      products: [
        { id: 1, name: 'Product A', description: 'Product A description' },
        { id: 2, name: 'Product B', description: 'Product B description' },
        { id: 3, name: 'Product C', description: 'Product C description' }
      ]
    }
  },
  methods: {
    changeRouteParam() {
      this.$router.push({ params: { id: 2 } })
    }
  }
}
</script>

以上就是关于Vue3路由跳转与参数获取的完整攻略，包含了路由信息创建、路由跳转和参数获取，以及两个示例说明。希望可以帮助到你。