Vue3 路由基础 02

嵌套路由

编写News的子路由：Detail.vue

<template>
    <div>
        <h1>新闻的详情</h1>
        <p>新闻的id是：xxx</p>
        <p>新闻的标题是：xxx</p>
        <p>新闻的内容是：xxx</p>
    </div>
</template>

<script lang="ts" setup name="Detail">
import { useRoute } from 'vue-router';

</script>

配置路由规则，使用children配置项

// 创建一个路由器，并暴露出去

// 第一步：引入vue-router
import { createRouter, createWebHistory } from 'vue-router'

// 引入可能要呈现的组件
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
import Detail from '@/pages/Detail.vue'
// 创建路由器
const router = createRouter({
    history: createWebHistory(), // 路由器的工作模式
    routes:[
        {
            name:'jia',
            path: '/home',
            component:Home
        },
        {
            path: '/news',
            component:News,
            children:[
                {
                    path:'detail',
                    component:Detail
                }
            ]
        },
        {
            path: '/about',
            component:About
        }
    ]
});

// 暴露出去 router
export default router

跳转路由（要加完整路径）：

<router-link to="/news/detail">xxxx</router-link>
<!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>

路由传参

query参数

传参数：

<!-- 跳转并携带query参数（to的字符串写法） -->
<router-link to="/news/detail?id=1&title=文章&content=欢迎你">
跳转
</router-link>

组件中的跳转：

<!-- 跳转并携带query参数（to的对象写法） -->
<RouterLink
:to="{
//name:'xiang', //用name也可以跳转
path:'/news/detail',
query:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>

接收参数：

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)

params参数

传递参数：

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}
</RouterLink>
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink
:to="{
name:'xiang', //用name跳转
params:{
id:news.id,
title:news.title,
content:news.title
}
}"
>
{{news.title}}
</RouterLink>

接收参数：

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

传递 params 参数时，若使用 to 的对象写法，必须使用 name 配置项，不能用 path 。

传递 params 参数时，需要提前在规则中占位。

路由的props配置

{
name:'xiang',
path:'detail/:id/:title/:content',
component:Detail,
// props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
// props:{a:1,b:2,c:3},
// props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
// props:true
// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
props(route){
return route.query
}
}

replace属性

作用：控制路由跳转时操作浏览器历史记录的模式。

浏览器的历史记录有两种写入方式，分别为 push 和 replace ：

• push 是追加历史记录（默认值）。
• replace 是替换当前记录。

<RouterLink replace .......>News</RouterLink>

编程式导航

路由组件的两个重要的属性： $route 和 $router 变成了两个 hooks。

this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

重定向