// 創(chuàng)建一個(gè)路由器,并暴露出去
// 引入路由配置文件
import { createRouter, createWebHashHistory,createWebHistory } from 'vue-router'
// 引入可能呈現(xiàn)的組件
import person from '@/components/person.vue'
import button from '@/view或pages/button.vue'
import detail from '@/view或pages/detail.vue'
// 創(chuàng)建路由器
const router = createRouter({
  // 必須要寫(xiě),路由的工作模式  history/Hash
  // history: createWebHashHistory(),
  history: createWebHistory(),
  // 路由規(guī)則
  routes: [
    /*  路由規(guī)則格式如下:
        其中path 和 component是必填項(xiàng), 其他選填
    {
      path: '/路徑',
      component: aComponent,  對(duì)應(yīng)的組件,后面展示不同的寫(xiě)法
      name: 'name',
      ...其他配置
    },
    */
    {
      path: '/person',
      component: person
    },
    {
      path: '/table',
      component: () => import('@/view或pages/table.vue')
    },
    {
      path: '/button',
      component: button
    },
    {
      path: '/news',
      name: 'news',
      component: () => import('@/view或pages/news.vue'),
      children: [
        {
          path: 'detail',
          component: detail
        }
      ]
    },
  ]
})
 
export default router

//       如果有子路由(嵌套路由),寫(xiě)在children里面
//       其寫(xiě)法跟正常的路由是一樣的,但子路由的路徑,不用加一開(kāi)始的/
//       這個(gè)路由最終路徑為 /news/testDetail
{
      path: '/news',
      name: 'xinwen',
      component: () => import('@/view或pages/news.vue'),
      children: [
        {
          name: 'testDetail',
          path: 'detail/:id/:title/:content',
          component: detail
        },
 
        /*  其他子路由 
        {
          
        }
        */
 
      ]
},

{
    path:'/',
    redirect:'/demo'
}

import router from './router/index'
 
const app =createApp(App)
 
app.use(router)
app.mount('#app')

<template>
  <div class="app">
    <h2 class="title">Vue路由測(cè)試</h2>
    <!-- 導(dǎo)航區(qū) -->
    <div class="navigate">
      <RouterLink to="/table" active-class="active">表格</RouterLink>
      <RouterLink to="/button" active-class="active">按鈕</RouterLink>
      <RouterLink to="/news" active-class="active">新聞</RouterLink>
    </div>
    <!-- 展示區(qū) -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
 
<script lang="ts" setup name="App">
  import {RouterLink,RouterView} from 'vue-router'  
</script>

<!-- 第一種：to的字符串寫(xiě)法 直接寫(xiě)路徑的字符串 -->
<router-link active-class="active" to="/home">主頁(yè)</router-link>
 
<!-- 第二種：to的對(duì)象寫(xiě)法 -->
<router-link active-class="active" 
    :to="{
        path:'/home',
        // 其他配置等 ......
        }"
>
Home
</router-link>
 
<router-link active-class="active" 
    :to="{
        name:'detail',
        // 其他配置等 ......
        }"
>
Detail
</router-link>

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

<!-- 跳轉(zhuǎn)并攜帶query參數(shù)（to的字符串寫(xiě)法） -->
<router-link to="/person/detail?id=1&name=Eve&age=18">
	跳轉(zhuǎn)
</router-link>
				
<!-- 跳轉(zhuǎn)并攜帶query參數(shù)（to的對(duì)象寫(xiě)法） -->
<RouterLink 
  :to="{
    //name:'ren', //用name也可以跳轉(zhuǎn)
    path:'/person/detail',
    query:{
      id:1,
      name: 'Eve',
      age: 18
    }
  }"
>
 顯示人
</RouterLink>

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query參數(shù)
const a = route.query
console.log(route.query.name); // Eve
console.log(route.query.age);  // 18

{
      path: '/news',
      name: 'xinwen',
      component: () => import('@/view或pages/news.vue'),
      children: [
        {
          name: 'testDetail',
          path: 'detail/:id/:title/:content',
          component: detail
        }
      ]
    },

<!-- 直接拼到路徑中,會(huì)按照占位去賦值 -->
<RouterLink :to="`/news/detail/001/新聞001/內(nèi)容001`">{{newsItem.title}}</RouterLink>
 
<RouterLink :to="{
    name:'testDetail', //用name跳轉(zhuǎn),不能用path
    params:{
        id:newItem.id,
        title:newItem.title,
        content:newItem.content
    }
}">
{{ newItem.title }}
</RouterLink>

import { useRoute } from 'vue-router'
let route = useRoute()
console.log(route.params);

{
    name:'xiang',
    path:'detail/:id/:title/:content',
    component:Detail,
 
  // props的對(duì)象寫(xiě)法，作用：把對(duì)象中的每一組key-value作為props傳給Detail組件
  // 但是數(shù)據(jù)就是寫(xiě)死的了,因此用的很少
  // props:{a:1,b:2,c:3}, 
 
  // props的布爾值寫(xiě)法，作用：把收到了每一組"params"參數(shù)，作為props傳給Detail組件
  // 如果寫(xiě)了true,那么正常按照params參數(shù)寫(xiě)就行,但是接收的地方可以通過(guò)defineProps來(lái)接
  // props:true
  
  // props的函數(shù)寫(xiě)法，作用：把返回的對(duì)象中每一組key-value作為props傳給Detail組件
  props(route){
 
  //  return route.query  想傳別的回去也行,但我們直接傳params回去
    return route.params
  }
}

<script lang="ts" setup namespace="Detail">
import { ref,toRefs} from 'vue'
import { useRoute } from 'vue-router'
let route = useRoute()
const props=defineProps({
  id: String,
  title: String,
  content: String
})
const {id,title,content}=toRefs(props)
</script>

import {useRouter} from 'vue-router'
// 找到路由器
const router = useRouter()
 
function clickToRoute(name:string){
/*
    這里是路由器的兩種工作模式,push和replace選取自己需要的模式
    參數(shù)的話(huà)跟RouterLink的to寫(xiě)法是一樣的
    可以直接傳字符串路徑,也可以寫(xiě)對(duì)象....  
    支持傳參  
*/
    // router.replace('/demo')
    router.push({name:name})
}