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'
}]
})