3.19 蓝桥杯+vue-CSDN博客

本文链接：https://blog.csdn.net/qq_61834727/article/details/136891208

本文详细介绍了在Vue项目中使用路由时，如何处理query参数、遇到torefs限制的情况，以及如何进行编程式导航和重定向。内容涵盖了`vue-router`组件的props和params配置，以及使用`createWebHistory`创建历史API。

摘要由CSDN通过智能技术生成

vue

路由

query传参

但是torefs好像用不了

<template>
  <ul class="news_list"></ul>
  <li>编号:{{ route.query.id }}</li>
  <li>标题:{{ route.query.title }}</li>
  <li>内容:{{ route.query.content }}</li>
</template>

<script setup>
import { useRoute } from 'vue-router';
//import { toRefs} from 'vue';
  let route = useRoute()
  //let {query} = toRefs(route)
</script>

<style>

</style>
<template>
<div class="news">
    <ul>
        <li v-for="news in newsList" :key="news.id">
            <!-- <RouterLink to="/news/detail">{{ news.title }}</RouterLink> -->

            <RouterLink
                :to="{
                path: '/news/detail',
                query: {
                    id: news.id,
                    title: news.title,
                    content: news.content
                                }
                            }">

                    {{ news.title }}
            </RouterLink>
        </li>

    </ul>
</div>

<div class="news_content">
    <RouterView></RouterView>
</div>
</template>

<script setup>
import { reactive } from 'vue';
import { RouterView,RouterLink } from 'vue-router';
const newsList = reactive([
    { id: 'aa1', title: '好', content: 'A' },
    { id: 'aa2', title: '不好', content: 'B' },
    { id: 'aa3', title: '很好', content: 'C' },
])
</script>

params

● 规则需要占位 path: ‘detail/:id/:title/:content’
● 路由不能用path，那就只能用name
● 规则可传可不传，用？path: ‘detail/:id/:title/:content?’

<RouterLink
    :to="{
    name:'ziluyou',
    params: {
        id: news.id,
        title: news.title,
        content: news.content
                    }
                }">

        {{ news.title }}
</RouterLink>

props配置

第一种写法：只能处理params参数

        path: '/news',
        component: news,
        children: [{
            name: 'ziluyou',
            path: 'detail/:id/:title/:content',
            component: detail,
            props: true
        }]

<template>
  <ul class="news_list"></ul>
  <li>编号:{{ id }}</li>
  <li>标题:{{ title }}</li>
  <li>内容:{{ content }}</li>
</template>

<script setup>
  defineProps(['id','title','content'])
</script>

第二种写法（query可用

children: [{
    name: 'ziluyou',
    path: 'detail',
    component: detail,
    //props: true
    props(route) {
        return route.query
    }
}]

编程式路由导航

router里面写的和上面的to里面一模一样

<button @click="showNewDetail(news)">查看新闻</button>



const router = useRouter()

function showNewDetail(news) {
    router.push({
        name:'ziluyou',
        query: {
            id: news.id,
            title: news.title,
            content: news.content
        }
    })
}

重定向

const router = createRouter({
    history: createWebHistory(),
    routes: [{
        path: '/about',
        component: about
    }, {
        path: '/person',
        component: person
    }, {
        path: '/',
        redirect: '/about'
    }]
})