Web前端开发篇（5）---vue3路由导航、路由嵌套、路由props配置

1 路由的简单实现

先安装：

cnpm i vue-router

要实现基本的路由切换功能：

第一步：新建router/index.ts：

// 创建一个路由器并暴露出去
// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个个要呈现的组件
import Home from "@/components/Home.vue";
import Abouts from "@/components/Abouts.vue";
import News from "@/components/News.vue";

// 第二步：创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News
        },
        {
            path:'/about',
            component:Abouts
        }
    ]
})

// 第三步：暴露出去router
export default router

// 第四步：到main.ts引入

第二步：修改main.ts：

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由器
import router from "@/router";

const app = createApp(App)
// 使用路由器
app.use(router)
app.mount('#app')

第三步：新建views/About.vue、views/Home.vue、views/News.vue：

<template>
  <div>
    <p>Abouts</p>
  </div>
</template>

<script setup lang="ts">
  import {onMounted, onUnmounted} from "vue";

  onMounted(()=>{
    console.log("Abouts组件挂载了")
  })
  onUnmounted(()=>{
    console.log("Abouts组件卸载了")
  })
</script>

<template>
  <div>
    <p>Home</p>
  </div>
</template>

<script setup lang="ts">
  import {onMounted, onUnmounted} from "vue";

  onMounted(()=>{
    console.log("Home组件挂载了")
  })
  onUnmounted(()=>{
    console.log("Home组件卸载了")
  })
</script>

<template>
  <div>
    <p>News</p>
  </div>
</template>

<script setup lang="ts">
  import {onMounted, onUnmounted} from "vue";

  onMounted(()=>{
    console.log("News组件挂载了")
  })
  onUnmounted(()=>{
    console.log("News组件卸载了")
  })
</script>

第四步：修改App.vue，创建导航区，展示区：

<template>
  <div class="app">
    <h2 class="style1">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="style1">
      <RouterLink to="/home" active-class="style2">首页</RouterLink>
      <RouterLink to="/news" active-class="style2">新闻</RouterLink>
      <RouterLink :to="{path:'/about'}" active-class="style2">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="style1">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {RouterView,RouterLink} from "vue-router";

</script>

<style scoped>
.style1{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
}

.style2 {
  color: red;
}
</style>

注意：通过点击导航，视觉效果上“消失”的组件，默认是被卸载的，需要的时候再去挂载。

2 to的其他写法

前两种写法：

<RouterLink to="/about" active-class="style2">关于/RouterLink>
<RouterLink :to="{path:'/about'}" active-class="style2">关于</RouterLink>

第三种写法，首先要在router/index.ts中，在每个路由对象中加入name属性：

// 创建一个路由器并暴露出去
// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个个要呈现的组件
import Home from "@/views/Home.vue";
import Abouts from "@/views/Abouts.vue";
import News from "@/views/News.vue";

// 第二步：创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            name:'page1',
            path:'/home',
            component:Home
        },
        {
            name:'page2',
            path:'/news',
            component:News
        },
        {
            name:'page3',
            path:'/about',
            component:Abouts
        }
    ]
})

// 第三步：暴露出去router
export default router

// 第四步：到main.ts引入

<RouterLink :to="{name:'page1'}" active-class="style2">首页</RouterLink>
<RouterLink :to="{name:'page2'}" active-class="style2">新闻</RouterLink>
<RouterLink :to="{name:'page3'}" active-class="style2">关于</RouterLink>

3 嵌套路由的简单实现

在Home页面，放置几个子级路由：

第一步：修改router/index.ts，添加children参数：

// 创建一个路由器并暴露出去
// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个个要呈现的组件
import Home from "@/views/Home.vue";
import Abouts from "@/views/Abouts.vue";
import News from "@/views/News.vue";
import HomeDetail from "@/views/Home-Detail.vue";

// 第二步：创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            name:'page1',
            path:'/home',
            component:Home,
            children:[
                {
                    path:'detail',
                    component:HomeDetail
                }
            ]
        },
        {
            name:'page2',
            path:'/news',
            component:News
        },
        {
            name:'page3',
            path:'/about',
            component:Abouts
        }
    ]
})

// 第三步：暴露出去router
export default router

// 第四步：到main.ts引入

第二步：修改Home.vue，添加子级路由的导航和数据，并传参：

<template>
  <div>
    <p>Home</p>
    <!-- 导航区 -->
    <ul>
      <li v-for="item in heroList" :key="item.id">
        <!-- 第一种写法 -->
        <!-- <RouterLink :to="`/home/detail?id=${item.id}&name=${item.name}&content=${item.content}`">{{item.name}}</RouterLink>-->
        <!-- 第二种写法 -->
        <RouterLink :to="{path:'/home/detail',query:{id:item.id,name:item.name,content:item.content}}">
          {{item.name}}
        </RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div>
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {reactive} from "vue";

  let heroList = reactive([
    {id:"lol-hero-01",name:"亚托克斯",content:"你觉得你能杀死我吗？"},
    {id:"lol-hero-02",name:"疾风剑豪",content:"死亡如风，常伴吾身"},
    {id:"lol-hero-03",name:"无极剑圣",content:"真正的大师永远抱着一颗学徒的心"},
    {id:"lol-hero-04",name:"时间刺客",content:"时间不在于拥有多少，而在于如何使用"}
  ])
</script>

第三步：新建views/Home-Detail.vue：

<template>
  <h3>我是子级路由</h3>
  <p>英雄：{{route.query.name}}</p>
  <p>台词：{{route.query.content}}</p>
</template>

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

  let route = useRoute()
</script>

4 路由的props配置

只需要修改上面案例的router/index.ts：

// 第二步：创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            name:'page1',
            path:'/home',
            component:Home,
            children:[
                {
                    path:'detail',
                    component:HomeDetail,
                    props(route){
                        return route.query
                    }
                }
            ]
        },
        {
            name:'page2',
            path:'/news',
            component:News
        },
        {
            name:'page3',
            path:'/about',
            component:Abouts
        }
    ]
})

这样在views/Home-Detail.vue中就可以直接接收参数，代码更简洁：

<template>
  <h3>我是子级路由</h3>
  <p>英雄：{{name}}</p>
  <p>台词：{{content}}</p>
</template>

<script setup lang="ts">
  defineProps(['id','name','content'])
</script>

5 编程式路由导航

通过按钮实现导航：

修改views/Home.vue:

<template>
  <div>
    <p>Home</p>
    <!-- 导航区 -->
    <ul>
      <li v-for="item in heroList" :key="item.id">
        <RouterLink :to="{path:'/home/detail',query:{id:item.id,name:item.name,content:item.content}}">
          {{item.name}}
        </RouterLink>
        <button @click="showDetail(item)">查看详情</button>
      </li>
    </ul>
    <!-- 展示区 -->
    <div>
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {reactive} from "vue";
  import { useRouter } from "vue-router";

  const heroList = reactive([
    {id:"lol-hero-01",name:"亚托克斯",content:"你觉得你能杀死我吗？"},
    {id:"lol-hero-02",name:"疾风剑豪",content:"死亡如风，常伴吾身"},
    {id:"lol-hero-03",name:"无极剑圣",content:"真正的大师永远抱着一颗学徒的心"},
    {id:"lol-hero-04",name:"时间刺客",content:"时间不在于拥有多少，而在于如何使用"}
  ])

  const router = useRouter()

  interface heroInter{
    id:string,
    name:string,
    content:string,
  }

  function showDetail(item:heroInter){
    router.push({path:'/home/detail',query:{id:item.id,name:item.name,content:item.content}})
  }

</script>

6 重定向

将网页的根目录‘/’，指定到某个路径：

修改router/index.ts：

// 创建一个路由器并暴露出去
// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个个要呈现的组件
import Home from "@/views/Home.vue";
import Abouts from "@/views/Abouts.vue";
import News from "@/views/News.vue";
import HomeDetail from "@/views/Home-Detail.vue";

// 第二步：创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            name:'page1',
            path:'/home',
            component:Home,
            children:[
                {
                    path:'detail',
                    component:HomeDetail,
                    props(route){
                        return route.query
                    }
                }
            ]
        },
        {
            name:'page2',
            path:'/news',
            component:News
        },
        {
            name:'page3',
            path:'/about',
            component:Abouts
        },
        {
            path:'/',
            redirect:'/home'
        }
    ]
})

// 第三步：暴露出去router
export default router

// 第四步：到main.ts引入