带参数的动态路由匹配

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

xxxxxxxxxx
// router/index.js
const routes = [
    {
        path:"/",
        component:Home
    }
    ...
    {
        path:"/details/:name",
        component:Details
    }
]

xxxxxxxxxx
<template>
    <h3>列表</h3>
    <ul>
        <li v-for="(item,index) in user.names" :key="index">
            <router-link :to="'/details/' + item">{{ item }}</router-link>
        </li>
    </ul>
</template>
<script setup>
import { reactive } from "vue"
const user = reactive({
    names:["iwen","ime","frank"]
})
</script>

选项式API

xxxxxxxxxx
<template>
    <h3>详情</h3>
    <p>{{ name }}</p>
</template>
<script>
export default {
    data(){
        return{
            name:""
        }
    },
    mounted(){
        this.name = this.$route.params.name
    }
}
</script>

组合式API

xxxxxxxxxx
<template>
    <h3>详情</h3>
    <p>{{ name }}</p>
</template>
<script setup>
import { useRoute  } from "vue-router"
import { ref } from "vue"
const route = useRoute()
const name = ref("")
name.value = route.params.name;
</script>

可选参数

xxxxxxxxxx
{
    path:"/details/:name?",
    component:Details
}

实时效果反馈

1.在Vue路由中，可以获取页面跳转传递的参数是：

A router

B params

C this.params

D this.$route.params

答案

1=>D