【Vue Router】002-动态路由匹配

清疚 2023-10-03 13:21 21阅读 0赞

### 文章目录 ###

*   *  1.2 动态路由匹配
     *   *  1.2.1 概述
         *  1.2.2 基本使用
         *   *  第一步：修改 Study.vue 文件
             *  第二步：修改 Books.vue 文件
             *  第三步：修改 index.js 文件
             *  第四步：运行结果，存在页面不刷新的问题
             *  第五步：在 Books.vue 中监听路由变化，解决问题
             *  第六步：运行结果，顺利实现页面跳转刷新
         *  1.2.3 查询参数
         *   *  概述
             *  第一步：修改 Study.vue 文件
             *  第二步：修改 index.js 文件
             *  第三步：修改 Books.vue 文件
             *  第四步：运行结果，成功实现预期效果

## 1.2 动态路由匹配 ##

### 1.2.1 概述 ###

在实际项目开发时，经常需要把匹配某种模式的路由映射到同一个组件。比如，对于 Book 组件，所有 id 不同的图书都使用这个组件渲染，这可以使用路径中的动态段（ dynamic segment ）来实现，称为参数（ parameter ），参数使用冒号（ : ）表示，如：/books/:id，即 /book/1 、/book/2 和 /book/foo 都将映射到相同的路由！当匹配到路由时，参数的值保存到 `this.$router.params` （ `this.$router` 代表当前路由对象 ）中，可以在组件内使用！

### 1.2.2 基本使用 ###

#### 第一步：修改 Study.vue 文件 ####

<template>
      <router-link to="/">主页</router-link>
      <router-link to="/news">新闻</router-link>
      <router-link to="/books/1">图书1</router-link>
      <router-link to="/books/2">图书2</router-link>
      <router-link to="/videos">视频</router-link>
      <div>=================</div>
      <router-view />
    </template>
    
    <script>
    export default {
      el: 'Study'
    }
    </script>
    
    <style>
    </style>

#### 第二步：修改 Books.vue 文件 ####

> 写法一：在 setup 函数中获取参数（此案例采用的写法）

<template>
      <div>图书页面：{
       { id }}</div>
    </template>
    
    <script>
    import { useRoute } from 'vue-router'
    export default {
      // 我们在 setup 函数中获取参数，并将参数导出
      setup () {
        const route = useRoute()
        const { id } = route.params
        return { id }
      }
    }
    </script>
    
    <style>
    
    </style>

> 写法二：直接在页面模板中使用 $router.params.id

<template>
      <div>图书页面：{
       { $router.params.id }}</div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>

#### 第三步：修改 index.js 文件 ####

import {
         createRouter, createWebHashHistory } from 'vue-router'
    import Study from '../views/Study.vue'
    import Home from '../views/Home.vue'
    import News from '../views/News.vue'
    import Books from '../views/Books.vue'
    import Videos from '../views/Videos.vue'
    const routes = [
      {
        
        path: '/',
        component: Study,
        redirect: '/home',
        children: [
          {
        
            path: '/home',
            component: Home
          }, {
        
            path: '/news',
            component: News
          }, {
        
            // 动态路由匹配
            path: '/books/:id',
            component: Books
          }, {
        
            path: '/videos',
            component: Videos
          }
        ]
      }
    ]
    
    const router = createRouter({
        
      history: createWebHashHistory(),
      routes
    })
    
    export default router

#### 第四步：运行结果，存在页面不刷新的问题 ####

![image-20210621164504815][]

#### 第五步：在 Books.vue 中监听路由变化，解决问题 ####

<template>
      <div>图书页面：{
       { id }}</div>
    </template>
    
    <script>
    import { useRoute } from 'vue-router'
    import { watch } from 'vue'
    import router from '../router/index'
    export default {
      // vue 2 写法
      watch: {
        $route (to, from) {
          // 对路由变化作出响应...
          console.log('===vue 2 选项式 API 写法=====')
          console.log('变化后的值：' + to.params.id, '变化前的值：' + from.params.id)
        }
      },
      // 我们在 setup 函数中获取参数，并将参数导出
      setup () {
        const route = useRoute()
        const { id } = route.params
        // vue 3 写法
        // 监听参数的变化
        watch(() => route.params.id, (currentValue, prevValue) => {
          console.log('====vue 3 组合式 API 写法====')
          console.log('变化后的值：' + currentValue, '变化前的值：' + prevValue)
          // 当 id 值发生变化，我们手动刷新页面，这可能并不是一个完美的解决方案，我们暂时如此！
          router.go(0)
        })
        return { id }
      }
    }
    </script>
    
    <style>
    </style>

#### 第六步：运行结果，顺利实现页面跳转刷新 ####

> 参考文章：Vue刷新页面的三种方式https://blog.csdn.net/zyplll/article/details/111937399

![image-20210621173204217][]

### 1.2.3 查询参数 ###

#### 概述 ####

URL 带有查询参数的形式为 /book?id=1 ，这在传统的 Web 应用中很常见，根据查询参数向的服务端请求数据。在单页应用开发中也支持路径中的查询参数！

#### 第一步：修改 Study.vue 文件 ####

<template>
      <router-link to="/">主页</router-link>
      <router-link to="/news">新闻</router-link>
      <router-link to="/books?id=1">图书1</router-link>
      <router-link to="/books?id=2">图书2</router-link>
      <router-link to="/videos">视频</router-link>
      <div>=================</div>
      <router-view />
    </template>
    
    <script>
    export default {
      el: 'Study'
    }
    </script>
    
    <style>
    </style>

#### 第二步：修改 index.js 文件 ####

import {
         createRouter, createWebHashHistory } from 'vue-router'
    import Study from '../views/Study.vue'
    import Home from '../views/Home.vue'
    import News from '../views/News.vue'
    import Books from '../views/Books.vue'
    import Videos from '../views/Videos.vue'
    const routes = [
      {
        
        path: '/',
        component: Study,
        redirect: '/home',
        children: [
          {
        
            path: '/home',
            component: Home
          }, {
        
            path: '/news',
            component: News
          }, {
        
            path: '/books',
            component: Books
          }, {
        
            path: '/videos',
            component: Videos
          }
        ]
      }
    ]
    
    const router = createRouter({
        
      history: createWebHashHistory(),
      routes
    })
    
    export default router

#### 第三步：修改 Books.vue 文件 ####

> 写法一：在 setup 函数中获取查询参数（此案例采用的写法）

<template>
      <div>图书页面：{
       { id }}</div>
    </template>
    
    <script>
    import { useRoute } from 'vue-router'
    import { watch } from 'vue'
    import router from '../router/index'
    export default {
      // vue 2 写法
      watch: {
        $route (to, from) {
          // 对路由变化作出响应...
          console.log('===vue 2 选项式 API 写法=====')
          console.log('变化后的值：' + to.query.id, '变化前的值：' + from.query.id)
        }
      },
      // 我们在 setup 函数中获取参数，并将参数导出
      setup () {
        const route = useRoute()
        const { id } = route.query
        // vue 3 写法
        // 监听参数的变化
        watch(() => route.query.id, (currentValue, prevValue) => {
          console.log('====vue 3 组合式 API 写法====')
          console.log('变化后的值：' + currentValue, '变化前的值：' + prevValue)
          // 当 id 值发生变化，我们手动刷新页面，这可能并不是一个完美的解决方案，我们暂时如此！
          router.go(0)
        })
        return { id }
      }
    }
    </script>
    
    <style>
    </style>

> 写法二：直接在页面模板中使用 $router.query.id

<template>
      <div>图书页面：{
       { $router.params.id }}</div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style>

#### 第四步：运行结果，成功实现预期效果 ####

![image-20210621174929525][]

[image-20210621164504815]: https://img-blog.csdnimg.cn/img_convert/32c901380444a0446dbabd690a18a103.png
[image-20210621173204217]: https://img-blog.csdnimg.cn/img_convert/a63d3d494d32d3aab659ae4578436533.png
[image-20210621174929525]: https://img-blog.csdnimg.cn/img_convert/d4cbea098f58acc73915accca21875ab.png