Vue3路由切换、嵌套路由、query和params路由传参、编程式路由导航

路由是用于实现页面间的路径(URL)映射以及页面的导航系统。简言之就是可以实现不刷新页面就能在一个页面里进行多个页面切换的方式。

要实现路由的切换，首先创建好需要使用的vue页面（为减少阅读量，这里不再写style样式）
Home.vue:

<template>
    <div class="home">
      <h2>首页</h2>
    </div>
  </template>
   
  <script setup lang="ts" name="Home">
  </script>

News.vue:

<template>
  <div class="news">
    <ul>
      <li><a href="#">新闻001</a></li>
      <li><a href="#">新闻002</a></li>
      <li><a href="#">新闻003</a></li>
      <li><a href="#">新闻004</a></li>
    </ul>
  </div>
</template>
 
<script setup lang="ts" name="News">
</script>

About.vue:

<template>
    <div class="about">
      <h2>关于</h2>
    </div>
  </template>
   
  <script setup lang="ts" name="About">
  </script>

路由切换

main.ts：

// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'
// 引入路由器
import router from './router'

// 创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount('#app')

路由配置文件index.ts:

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

// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个一个可能要呈现组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'

// 第二步：创建路由器
const router = createRouter({
  history:createWebHistory(), //路由器的工作模式
  routes:[
    {
      name:'zhuye',
      path:'/home',
      component:Home
    },
    {
      name:'xinwen',
      path:'/news',
      component:News
    },
    {
      name:'guanyu',
      path:'/about',
      component:About
    },
  ]
})

// 暴露出去router
export default router

App.vue：

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
           //to的三种写法
       <RouterLink to="/home" active-class="active">首页</RouterLink>
       <RouterLink :to="{name:'xinwen'}" active-class="active">新闻</RouterLink>
       <RouterLink :to="{path:'/about'}" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
 
<script lang="ts" setup name="App">
  import {RouterView,RouterLink} from 'vue-router'
</script>

启动项目

可实现点击不同的按钮跳转到不同的路由

嵌套路由

News.vue:

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <RouterLink to="/news/detail">{{news.title}}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
 
<script setup lang="ts" name="News">
  import {reactive} from 'vue'
  import {RouterView,RouterLink} from 'vue-router'
 
  const newsList = reactive([
    {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
    {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
    {id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
    {id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
  ])
 
</script>

Detail.vue:

<template>
  <ul class="news-list">
    <li>编号：xxx</li>
    <li>标题：xxx</li>
    <li>内容：xxx</li>
  </ul>
</template>
 
<script setup lang="ts" name="Detail">
</script>

编写News的子路由Detail.vue，使用children配置项

{
            name:'xinwen',
            path:'/news',
            component:News,
            children:[
                {
                    name:'xiang',
                    path:'detail',
                    component:Detail
                }
            ]
        },

点击News页面的按钮，均可显示出Detail页面的内容

路由传参

query参数

 {
      name:'xinwen',
      path:'/news',
      component:News,
      children:[
        {
            name:'xiang',
            // 加？表示如果content没有内容时，可不传这个参数
            path:'Detail',
            component:Detail
        }
      ]
    },

传递参数：

//两种方式
 <!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink> -->
           <RouterLink :to="{
            name:'xiang',
            query:{
                id:news.id,
                title:news.title,
                content:news.content
            }
           }">
{{ news.title }}
           </RouterLink>

接收参数：

<template>
    <ul class="news-list">
      <li>编号：{{router.query.id}}</li>
      <li>标题：{{router.query.title}}</li>
      <li>内容：{{router.query.content}}</li>
    </ul>
  </template>
   
  <script setup lang="ts" name="About">
   import { useRoute } from 'vue-router';
   let router=useRoute()
  </script>

在控制台可查看数据：

params参数

 {
      name:'xinwen',
      path:'/news',
      component:News,
      children:[
        {
            name:'xiang',
            // 加？表示如果content没有内容时，可不传这个参数
            path:'Detail/:id/:title/:content?',
            component:Detail
        }
      ]
    },

传递参数：

 <!-- <RouterLink :to="`/news/detail/id=${news.id}/title=${news.title}/content=${news.content}`">{{news.title}}</RouterLink> -->
           <RouterLink :to="{
            name:'xiang',
            params:{
                id:news.id,
                title:news.title,
                content:news.content
            }
           }">
{{ news.title }}
           </RouterLink>

接收参数：

<template>
    <ul class="news-list">
      <li>编号：{{router.params.id}}</li>
      <li>标题：{{router.params.title}}</li>
      <li>内容：{{router.params.content}}</li>
    </ul>
  </template>
   
  <script setup lang="ts" name="About">
   import { useRoute } from 'vue-router';
   let router=useRoute()
  </script>

注意：params参数不能传对象和数组。

编程式路由导航

News.vue:

<template>
    <div class="news">
      <!-- 导航区 -->
      <ul>
        <li v-for="news in newsList" :key="news.id">
           <RouterLink :to="{
            name:'xiang',
            params:{
                id:news.id,
                title:news.title,
                content:news.content
            }
           }">{{ news.title }}</RouterLink>
           <button @click="showDetail(news)">点击跳转</button>
        </li>
      </ul>
      <!-- 展示区 -->
      <div class="news-content">
        <RouterView></RouterView>
      </div>
    </div>
  </template>
   
  <script setup lang="ts" name="News">
    import {reactive} from 'vue'
    import {RouterView,RouterLink,useRouter} from 'vue-router'
    const newsList = reactive([
      {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
      {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
      {id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
      {id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
    ])
    const router=useRouter()
    function showDetail(news:any) {
    //路由跳转
      router.push({
        name:'xiang',
            params:{
                id:news.id,
                title:news.title,
                content:news.content
            }
      })
    }
  </script>

新闻页面中，点击不同的按钮跳转到不同的路由