Vue3中的路由使用解读

普通组件 Header：
// src/App.vue
<script setup lang="ts">
import Header from './components/Header.vue'; 
</script>

<template>
  <Header/>
</template>
<style scoped>

</style>



路由组件 Home：
// src/router/index.ts
import Home from '@/pages/Home.vue'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      name: 'shouye',
      path: '/home',
      component: Home
    },
    
})

export default router

npm i vue-router

// src/router/index.ts
import { createRouter, createWebHistory, createWebHashHistory  } from "vue-router"

// src/router/index.ts
import { createRouter, createWebHistory, createWebHashHistory  } from "vue-router"

import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
import Details from '@/pages/Details.vue'

// src/router/index.ts
import { createRouter, createWebHistory, createWebHashHistory  } from "vue-router"
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
import Details from '@/pages/Details.vue'

const router = createRouter({
  history: createWebHashHistory(),
  // createWebHistory：History模式  
  // createWebHashHistory：Hash模式
  routes: [
    {
      name: 'shouye',
      path: '/home,
      component: Home，
    },
    {
      name: 'guanyu',
      path: '/about',
      component: About，
    },
    {
      name: 'xinwen',
      path: '/news',
      component: News,
      children: [
        {
          name: 'xiangqing',
          path: 'details',
          component: Details
        }
      ]
    }
  ]
})

export default router

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router"; // 引入刚才创建的路由规则

const app = createApp(App) 
app.use(router) // 一定要在挂载之前使用这个规则
app.mount('#app')

// src/App.ts
<script setup lang="ts">
</script>

<template>
  <router-link to="/home" replace>首页</router-link> |
  <router-link to="/about" push>关于</router-link>|
  <router-link to="/news" push>新闻</router-link>
  <router-view/>
</template>

<style scoped>

</style>

// const userId = ref('aaaaa')
// const userName= ref('bbbbbb')

// 1.to的字符串写法传递query参数
<router-link to="/detail/?userId=${userId}&userName=${userName}">详情</router-link> 

// 2.to的字符串写法传递param参数
<router-link to="/detail/${userId}/${userName}">详情</router-link> 

// 3.to的对象写法通过path方式传递query参数
<router-link :to="{path: '/detail', query: {userId, userName}">详情</router-link> 

// 4.to的对象写法通过path方式传递params参数
<router-link :to="{path: '/detail', params: {userId, userName}">详情</router-link> 

// 5.to的对象写法通过name方式传递query参数
<router-link :to="{name: 'xiangqing', query: {userId, userName}">详情</router-link> 

// 6.to的对象写法通过name方式传递params参数
<router-link :to="{name: 'xiangqing', params: {userId, userName}">详情</router-link> 

// src/router/index.ts
import { createRouter, createWebHashHistory } from "vue-router"
import News from '@/pages/News.vue'
import Detail from '@/pages/Detail.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: 'xinwen',
      path: '/news',
      component: News,
      // 注意：子组件path开头不加斜杠
      children: [
        {
          name: 'xiangqing',
          path: 'detail', // 1.传递query参数时，不用写占位符
          component: Detail,
        }
        
        {
          name: 'xiangqing',
          path: 'detail/:userId/:userName' // 2.传递param参数时，path必须用占位符
          component: Detail,
        }
      ]
    }
  ]
})

export default router

// src/pages/detail.vue
<template>
    <div>我是{{ query.userId}}-{{ query.userName}}</div> // 或者
    <div>我是{{ params.userId}}-{{ params.userName}}</div>
</template>
<script setup lang="ts">
 import { toRefs } from "vue";
 import { useRoute } from "vue-router"; // 拿到路由
 const route = useRoute()
 // 响应式的数据解构出来的属性并不会是响应式的，需要toRefs手动响应式
 const { query, params } = toRefs(route)
</script>

<style scoped>
</style>

// src/router/index.ts 不需要添加其他额外属性
children: [
  {
    name: 'xiangqing',
    path: 'detail', 
    component: Detail,
  }
]

// src/pages/detail.vue
<template>
    <div>我是{{ userId }}-{{ userName }}</div> // 两种参数类型都可以直接用
</template>
<script setup lang="ts">
defineProps(['userId ','userName ']) // 定义出参数就可以用了
</script>

<style scoped>
</style>

// src/router/index.ts  对应的子组件路由规则
// 1.布尔类型props 
.....略.....
children: [
  {
    name: 'xiangqing',
    path: 'detail', 
    component: Detail,
    props: true  // 布尔写法只能处理params参数
  }
]
// 2.函数类型props
children: [
  {
    name: 'xiangqing',
    path: 'detail', 
    component: Detail,
    props(to) { // 函数写法既可以处理query参数，又可以处理params参数。
       return {
         query: to.query, 
         params: to.params
       } 
    }, 
  }
]
.....略.....

// src/pages/detail.vue
<template>
    <div>详情组件</div>
    <button @click="jump(3000, true)">点击我3秒后使用默认模式push进入详情1</button>
    <button @click="jump(5000, false)">点击我5秒后使用replace模式进入详情2</button>
    <router-view/>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter() // 引入路由器
let timer = null
function jump(delay: number, jumpType: boolean) {
  timer = setTimeout(() => {
    if(jumpType){
      router.push({ // 默认为push模式，可回退记录
        name: 'xiangqing',
        params: {
          id: '11',
          content: '1111'
        },
      })
    }else{
      router.replace({ // replace模式，不可回退。
        name: 'xiangqing',
        params: {
          id: 'params1',
          content: 'params2'
        },
        query: {
          id: 'query3',
          content: 'query4'
        },
      })
    }
  }, delay)
}
</script>

<style scoped>

</style>