vue3（三）-526互联

1、父子路由在页面局部跳转的应用
假设有一页面NewsView.vue，里面的内容要如何实现如下图所示的布局，如何实现点击页面左半部分文字，而只有页面右半部分的内容发生变化呢？

不难想到，导航栏的内容是挂载到App.vue文件上的。稍加思索的是，要利用RouterView技术，将页面右（Detail.vue文件）挂载到页面左（NewsView.vue文件）上面，Detail.vue要获取到NewsView.vue的内容（参数）。具体代码实现如下，请耐心看完：

//  路由配置文件
import { createRouter, createWebHistory} from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';
import NewsView from '../views/NewsView.vue';
import Detail from '../views/Detail.vue';

const router = createRouter({
    history: createWebHistory(),    //  路由器的工作模式
    routes: [   //  路由规则
        {
            path: '/home',
            name: 'home',
            component: HomeView,
        },
        {
            path: '/about',
            name: 'about',
            component: AboutView
        },
        {
            path: '/news',
            name: 'news',
            component: NewsView,
            children: [
                {
                    path: 'detail',
                    name: 'detail',
                    component: Detail,
                },
            ]
        }
    ]
})
export default router

//  文件App.vue
<template>
  <div class="navigate">
    <RouterLink class="rlink" to="/home">点击此处回主页</RouterLink>
    <RouterLink class="rlink" to="/about">点击此处显示关于</RouterLink>
    <RouterLink class="rlink" to="/news">点击此处显新闻</RouterLink>
    <!-- 普通标签写herf，RouterLink标签写to，或者 :to="{name:""}" -->
  </div>
  <router-view/>    <!-- 挂载路由实现本页面的局部跳转 -->
</template>

<script lang = "ts">
import { RouterView, RouterLink } from 'vue-router'
export default{
}
</script>

<style scoped>
div.navigate{
  margin: 90px;
}
.rlink{
  margin-right: 40px;
}
</style>

//  文件NewsView.vue
<template>
  <div class = "layout1">  <!-- layout1是flex布局 -->
    <div class="my">
      <div class v-for="i in newslist" :key="i.id">
      <!-- <RouterLink :to="`/news/detail?id=${i.id}&title=${i.title}`">{{ i.title }}</RouterLink> -->
      <RouterLink
        :to="{
            path: '/news/detail',
            query:{
              id: i.id,
              title: i.title,
              content: i.content
            }
        }">   {{ i.title }} 
      </RouterLink>
      </div>
    </div>
    <div class="my">
      <RouterView />  <!-- 挂载路由实现本页面的局部跳转 -->
    </div>
  </div>
</template>

<script lang = 'ts'>
import { reactive } from 'vue'

export default{
  name: "NewsView",
  setup(){
    const newslist = reactive([
      { id: 0, title: "2024年上半年软考报名时间", content: "2024-03-01" },
      { id: 1, title: "2024年上半年软考考试时间", content: "2024-05-25"},
      { id: 2, title: "2024年上半年软考成绩查询时间", content: "2024-08-01" },
    ]);
    return {
      newslist,
    }
  }
}
</script>

<style scoped>
div.my{
  margin-right: 20px;
}
section.layout1 {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
}
</style>

//  文件Detail.vue
<template>
    <div>
        <li>编号： {{ route.query.id }}</li>        <!--通过query传递参数-->
        <li>标题： {{ route.query.title }}</li>
        <li>内容： {{ route.query.content }}</li>
    </div>
</template>

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

export default{
    name: "Detail",
    setup(){
        let route = useRoute();
        return{
            route
        }
    },
    components:{
    }
}
</script>

2、通过param传递参数

provide inject vue3 vue