Vue3(三)路由基本使用、工作模式(history,hash)、query传参和param传参、props配置、编程式路由导航

一、路由的基本使用

1. 安装：npm i vue-router

2. 在src/pages文件下，创建三个路由组件(Home\About\News,具体内容不写了)

3. 创建路由器(src/routers/index.ts)

   // 创建一个路由器并暴露出去
   // 1. 引入createRouter
   import { createRouter,createWebHistory } from "vue-router";
   
   // 2. 引入路由组件
   import Home from '../pages/Home.vue'
   import About from '../pages/About.vue'
   import News from '../pages/News.vue'
   
   // 3. 创建一个路由器
   const router = createRouter({
       history:createWebHistory(), // 必须指定路由工作模式
       routes:[
          // 重定向，不加重定向，会报警告 No match found for location with path "/"
           {
               path:'/',
               redirect:'/home'
           },
           // 通过name属性，给路由命名
           {
               name:'/shouye',
               path:'/home',
               component:Home
           },
           {
               name:'xinwen',
               path:'/news',
               component:News
           },
           {
           	name:'guanyu',
               path:'/about',
               component:About
           }
       ]
   })
   export default router
   

4. 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")
   

5. App组件中使用路由组件
   RouterLink和RouterView的作用与vue2中的router-link,router-view的作用一样。
   active-class绑定组件激活时的样式。当组件激活时（active的样式还是要自己写），会自动添加样式active

   <template>
     <div class="app">
       <h2 class="title">Vue路由测试</h2>
       <!-- 导航区 -->
       <div class="navigate">
         <RouterLink to="/home" active-class="active">首页</RouterLink>
         <RouterLink to="/news" active-class="active">新闻</RouterLink>
         <RouterLink to="/about" active-class="active">关于</RouterLink>
       </div>
       <!-- 展示区 -->
       <div class="main-content">
         <RouterView></RouterView>
       </div>
     </div>
   </template>
   <script lang="ts" setup name="App">
   import { RouterLink, RouterView } from 'vue-router'  
   </script>
   <style>
   
   .navigate a.active {
     background-color: #64967E;
     color: #ffc268;
     font-weight: 900;
     text-shadow: 0 0 1px black;
     font-family: 微软雅黑;
   }
   </style>
   

   

1. 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
2. 点击首页，首页组件挂载，展示首页组件内容。再点击新闻，新闻组件挂载并显示该组件内容。首页组件则默认被卸载(onUnmounted)
3. 重定向： 将特定的路径，重新定向到已有路由。否则页面一打开，路径是/，不对应任何路由组件，页面会空白
4. 通过name属性，给路由命名

二、路由器的工作模式

与vue2中的工作模式一样，就是设置模式的方式不一样；Vue(十三) 路由器的两种工作模式

1. history模式

   优点：URL更加美观，不带有#。

   缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

   const router = createRouter({
   	history:createWebHistory(), //history模式
   	/******/
   })
   

2. hash模式

   优点：兼容性更好，因为不需要服务器端处理路径。

   缺点：URL带有#不太美观，且在SEO优化方面相对较差。

   const router = createRouter({
   	history:createWebHashHistory(), //hash模式
   	/******/
   })
   

三、RouterLink中to的两种写法

<!-- 字符串写法 -->
<RouterLink to="/about" active-class="active">关于</RouterLink>
<!-- 对象写法 -->
<RouterLink :to="{ path: '/about' }" active-class="active">关于</RouterLink>
<RouterLink :to="{ name: '/guanyu' }" active-class="active">关于</RouterLink>

四、嵌套路由

1. 创建路由组件 Detail.vue
2. 配置路由规则 src/router/index.ts

 {
     name:'xinwen',
     path:'/news',
     component:News,
     children:[
         {
             name:'xiangqing'
             path:'detail', // 注意这里不用加'/'
             component:Detail
         }
     ]
 },

3. News组件：

<template>
  <!-- 新闻 -->
  <div class="news">
    <ul>
      <li v-for=" n in news" :key="n.id">
        <RouterLink :to="'/news/detail'">{{ n.title }}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

五、路由传参

无论点击展示区的哪个title，右边详情区的内容应该展示对应的信息。

1. query传参

传参的两种形式：

<!--src/pages/News.vue-->
<ul>
  <li v-for=" n in news" :key="n.id">
    <!-- 第一种，字符串，用?拼接query参数 -->
    <RouterLink :to="`/news/detail?id=${n.id}&title=${n.title}&content=${n.content}`">{{ n.title }}</RouterLink>
    <!-- 第二种，对象写法 -->
    <RouterLink :to="{
      path: '/news/detail',
      query: {
        id: n.id,
        title: n.title,
        content: n.content
      }
    }">{{ n.title }}</RouterLink>
  </li>
</ul>

Detail组件接收参数

<template>
  <ul class="news-list">
    <li>编号:{{ query.id }}</li>
    <li>标题:{{ query.title }}</li>
    <li>内容:{{ query.content }}</li>
  </ul>
</template>
<script setup lang="ts" name="About">
	import { useRoute } from 'vue-router'
	import { toRefs } from 'vue'
	// 获取route信息
	let route = useRoute()
	console.log(route);
	// 解构出来不是响应式数据，需要通过toRefs将其转为响应式数据
	let { query } = toRefs(route)
</script>

可以看出route是个响应式数据

2. params传参

(1). 传递参数
params传参的两种写法

<ul>
  <li v-for=" n in news" :key="n.id">
    <!-- 第一种,字符串 -->
    <RouterLink :to="`/news/detail/${n.id}/${n.title}/${n.content}`">{{ n.title }}</RouterLink> 
    <!-- 第二种, 对象写法,注意不可用path，需要用name属性指定路由 -->
    <RouterLink :to="{
      name: 'xiangqing',
      params: {
        id: n.id,
        title: n.title,
        content: n.content
      }
    }">{{ n.title }}</RouterLink>
  </li>
</ul>

需要提前占位，因为params参数属于路径的一部分。如果没占位，假设路径为：/news/detail/123/title/content；路由中没有这样的路径，就会报错。

  {
      name:'xinwen',
      path:'/news',
      component:News,
      children:[
          {
              name:'xiangqing',
              path:'detail/:id/:title/:content?',
              component:Detail
          }
      ]
  },

?表示content这个参数可传可不传。

(2). 读取参数

注意点1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
注意点2：传递params参数时，需要提前在规则中占位。

六、路由的propos配置

这个在vue2中也说过。
propos属性的作用是少写重复项，让路由组件更方便的接收到参数。
Vue(十三) 路由器的propos配置

(1) 写法一: props:true,

  {
     name:'xinwen',
        path:'/news',
        component:News,
        children:[
            {
                name:'xiangqing',
                path:'detail/:id/:title/:content?',
                component:Detail,
                // 第一种写法,将路由收到的所有params参数传递给Detail组件.
                props:true,
            }
        ]
 },

只适用于params参数，props：true时相当于这样传递参数：
<Detail id=xxx title=xxx content=xxx>

(2) 写法二:函数式写法

 children:[
     {
         name:'xiangqing',
         path:'detail',
         component:Detail,
         // 第二种写法,函数写法,传递params参数或者props参数
          props(route){
              return route.query
          }
     }
 ]

(3) 写法三:固定值，不推荐

  props:{
      id:123,
      title:'tom',
      content:'tom and jerry'
  }

七、编程式路由导航

路由组件的两个重要的属性：$route和$router变成了两个hooks。

import { useRouter } from 'vue-router'
let router = useRouter()
// pushAPI，追加历史记录
  router.push({
    name: 'xiangqing',
    query: {
      id: n.id,
      title: n.title,
      content: n.content
    }
  })
  // replace，替换当前历史记录
    router.replace({... })

push里的值可声明式导航RouterLink里的to属性值一致。to的值可以怎么写，push等API里就可以怎么写。