vue3-路由Router

基本使用(与vue2语法有差异)#

1. 安装vue-router，vue3需要使用vue-router的4版本

   npm i vue-router@4  
   

2. 编写路由文件

   // 引入createRouter
   import {createRouter, createWebHistory} from "vue-router";
   
   // 引入组件
   import UserInfo from "@/components/UserInfo.vue";
   
   // 创建一个路由
   const router = createRouter({
           // vue3路由必须指定工作模式
           history: createWebHistory(),
           // 定义规则和vue2一样
           routes: [
   
               {
                   path: "/user", // 路径
                   component: UserInfo // 组件
               }
           ]
       }
   )
   
   export default router
   
   

3. 使用路由

   // main.ts
   
   import './assets/main.css'
   
   import { createApp } from 'vue'
   import App from './App.vue'
   
   import router from "@/routers";
   
   // 创建应用
   const app = createApp(App)
   
   
   // 使用路由
   app.use(router)
   
   // 挂载容器
   app.mount('#app')
   
   

4. 路由跳转

   <script setup lang="ts" name="App">
   
   // 引入路由视图、路由跳转
   import {RouterView, RouterLink} from "vue-router";
   
   </script>
   
   
   <template>
     <p>App组件</p>
     <!-- to：路由跳转路径 ， active-class 路由被激活时显示的效果，值是一个css类-->
     <RouterLink to="/user" active-class="active">跳转User</RouterLink>
     <!-- 路由对应组件显示的位置 -->
     <RouterView></RouterView>
   </template>
   

5. 路由组件(路由规则渲染)通常存放在pages 或 views文件夹，一般组件(组件标签渲染)通常存放在components文件夹。

6. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载

7. RouterLink to属性的两种写法，规则和vue2一致

   • <!-- 第一种：to的字符串写法 -->
     <RouterLink to="/user">to user</RouterLink>
     

   • <!-- 第二种：to的对象写法 -->
     <RouterLink active-class="active" :to="{path:'/user'}">to user</RouterLink>
     

8. 路由器的工作模式

   1. history模式

      //URL不带有#，更接近传统的网站URL
      // 项目上线，需要服务端配合处理路径问题，否则刷新会有404错误，与vue2一样
      
      const router = createRouter({
      	history:createWebHistory()
      
      })
      

   2. hash模式

      // 兼容性更好，因为不需要服务器端处理路径
      // URL带有#,在SEO优化方面相对较差
      const router = createRouter({
      	history:createWebHashHistory()
      })
      

命名路由(语法与vue2一样)#

给路由起别名，方便跳转引用

 routes: [
            {
                path: "/user", // 路径
                component: UserInfo, // 组件
              	name:"get_user" // 命名
            }
        ]

    <RouterLink :to="{name:'get_user'}">to </RouterLink>

嵌套路由(语法与vue2一样)#

1. 路由设置

    routes: [
   
           {
               path: "/user",
               component: UserInfo,
               // 通过children 配置多级路由，可以配置多个路由
               children: [
                   {
                       path: "list",  // 不需要写/
                       component: UserList,
                     	name:"userList"
                   }
   
               ]
           }]
   

2. 路由跳转

   <!-- 字符串写法跳转路径要写完整的路径-->
   <RouterLink to="/user/userList">to </RouterLink>
   <!-- 使用别名直接跳转 -->
   <RouterLink :to="{name:'userList'}">to </RouterLink>
   <!-- 子路由显示位置 -->
   <RouterView></RouterView>
   
   

路由参数(与vue2接收语法差异)#

useRoute#

主要用于获取当前路由的信息，是一个只读的操作。返回的是一个表示当前路由状态的对象，这个对象包含了如路径（path）、路由参数（params）、查询参数（query）等属性

query参数#

1. 传递参数

   <!-- 字符串写法 -->
   <RouterLink :to="/user/userList?id=${id}">to </RouterLink>
   <!-- 对象写法-->
   <RouterLink :to="{
                    // path:'/user/userList'  path和name跳转都可以
                    name:'userList',
                    query:{
                    id:id
                    }}">to </RouterLink>
   

2. 接收参数

   import {useRoute} from 'vue-router'
   // useRoute是一个组合式函数。它用于在组件内部获取当前路由对象的信息。这个路由对象包含了当前路由的各种参数，如路径、查询参数、动态路由参数等诸多和当前路由状态相关的内容
   const route = useRoute()
   

   {{route.query}}
   {{route.query.id}}
   

params参数#

1. 声明params占位

      {
                   path: "/user",
                   component: UserInfo,
                   children: [
                       {
                           path: "list/:user_id",   // user_id占位
                           component: UserList,
                           name:"userList"
                       }
   
                   ]
               }
   

2. 传递参数

   <!-- 字符串写法-->
   <RouterLink :to="/user/userList/${user_id}">to </RouterLink>
   <!-- 对象写法-->
   <RouterLink :to="{
                    // 必须使用name跳转，不能使用路径
                    name:'userList',  
                    params:{
                    user_id:user_id
                    }
                    }">to </RouterLink>
   

3. 接收参数

   import {useRoute} from 'vue-router'
   const route = useRoute()
   

   {{route.params}}
   {{route.params.user_id}}
   

路由props(与vue2语法一致)#

让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

1. 开关写法

     children: [
                       {
                           path: "list/:user_id",   // user_id占位
                           component: UserList,
                           name:"userList",
                           // 收到的所有params参数以key、value的形式给组件
                           // 需要在组件内defineProps接收
                           props:true,
                       }
   
                   ]
   

2. 函数写法

   props(to) {
   
     // 将所有query参数以key-value的形式传递给组件
     // 需要在组件内defineProps接收
     // to.params是所有的params参数
     return to.query
   }
   

3. 对象写法

   // 直接写死的数据
   props:{
     user_id:100
   }
   

路由replace(与vue2语法一致)#

1. 作用：控制路由跳转时操作浏览器历史记录的模式。

2. 浏览器的历史记录有两种写入方式：分别为push和replace：

   • push是追加历史记录（默认值）。
   • replace是替换当前记录。

3. 开启replace模式：

   <RouterLink replace :to="{name:'userList'}">to</RouterLink>
   

编程式导航(与vue2语法差异)#

当需要实现页面之间的跳转、导航栏的功能或者处理路由相关的操作逻辑时，会用到useRouter

import {useRouter} from 'vue-router'

const router = useRouter()
// 以push 的模式跳转到/user 字符串写法
router.push("/user")
// 以replace的模式跳转到userList 字符串写法
router.replace("/user/userList")

//对象写法，通过name跳转，对象里可以正常写params、query
router.push({name:"userList"})

重定向#

将特定的路径，重新定向到已有路由,使用redirect属性

 routes: [
   {
     // 如果访问/路径，重定向到index
     path:"/",
     redirect:"/index"
     
   }
 ]