Vue2向Vue3过度核心技术声明式导航

本是古典何须时尚 2024-03-24 21:49 43阅读 0赞

#### 目录 ####

*   *  1 声明式导航-导航链接
     *   *  1.需求
         *  2.解决方案
         *  3.通过router-link自带的两个样式进行高亮
         *  4.总结
     *  2 声明式导航-两个类名
     *   *  1.router-link-active
         *  2.router-link-exact-active
         *  3.在地址栏中输入二级路由查看类名的添加
         *  4.总结
     *  3 声明式导航-自定义类名
     *   *  1.问题
         *  2.解决方案
         *  3.代码演示
         *  4.总结
     *  4 声明式导航-查询参数传参
     *   *  1.目标
         *  2.跳转传参
         *  3.查询参数传参
         *  4.代码演示
     *  5 声明式导航-动态路由传参
     *   *  1.动态路由传参方式
         *  2.查询参数传参 VS 动态路由传参
         *  3.总结
     *  6 动态路由参数的可选符(了解)
     *   *  1.问题
         *  2.原因

--------------------

### 1 声明式导航-导航链接 ###

![在这里插入图片描述][758fa708a3394f3ab2868729bcd9b012.png]

#### 1.需求 ####

实现导航高亮效果

![在这里插入图片描述][987125fcacb847cc8c427fbb7a0ac3e9.png]

如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！

#### 2.解决方案 ####

vue-router 提供了一个全局组件 router-link (取代 a 标签)

*  **能跳转**，配置 to 属性指定路径(**必须**) 。本质还是 a 标签 ，**to 无需 \#**
 *  **能高亮**，默认就会提供**高亮类名**，可以直接设置高亮样式

语法： 发现音乐

#### 3.通过router-link自带的两个样式进行高亮 ####

使用router-link跳转后，我们发现。当前点击的链接默认加了两个class的值 `router-link-exact-active`和`router-link-active`

我们可以给任意一个class属性添加高亮样式即可实现功能

#### 4.总结 ####

*  router-link是什么？
 *  router-link怎么用？
 *  router-link的好处是什么？

### 2 声明式导航-两个类名 ###

当我们使用跳转时，自动给当前导航加了**两个类名**

![在这里插入图片描述][4a3c54443b1944eba1d8d73e3d3a1926.png]

#### 1.router-link-active ####

**模糊匹配（用的多）**

to=“/my” 可以匹配 /my /my/a /my/b …

只要是以/my开头的路径 都可以和 to="/my"匹配到

#### 2.router-link-exact-active ####

**精确匹配**

to=“/my” 仅可以匹配 /my

#### 3.在地址栏中输入二级路由查看类名的添加 ####

#### 4.总结 ####

*  router-link 会自动给当前导航添加两个类名，有什么区别呢？

### 3 声明式导航-自定义类名 ###

#### 1.问题 ####

router-link的**两个高亮类名 太长了**，我们希望能定制怎么办

![在这里插入图片描述][eae7cdbd6c194518bdd5ac8ad80ad2b0.png]

#### 2.解决方案 ####

我们可以在创建路由对象时，额外配置两个配置项即可。 `linkActiveClass`和`linkExactActiveClass`

const router = new VueRouter({
        
      routes: [...],
      linkActiveClass: "类名1",
      linkExactActiveClass: "类名2"
    })

![在这里插入图片描述][ea2ff0a8b6e24f78bf9d45c60d23395a.png]

#### 3.代码演示 ####

// 创建了一个路由对象
    const router = new VueRouter({
        
      routes: [
        ...
      ], 
      linkActiveClass: 'active', // 配置模糊匹配的类名
      linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
    })

#### 4.总结 ####

如何自定义router-link的两个**高亮类名**

### 4 声明式导航-查询参数传参 ###

#### 1.目标 ####

在跳转路由时，进行传参

![在这里插入图片描述][91a092a28eea402b9358058e1c11db7a.png]

比如：现在我们在搜索页点击了热门搜索链接，跳转到详情页，**需要把点击的内容带到详情页**，改怎么办呢？

#### 2.跳转传参 ####

我们可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中

*  查询参数传参
 *  动态路由传参

#### 3.查询参数传参 ####

*  如何传参？
 *  如何接受参数
    
    固定用法：$router.query.参数名

#### 4.代码演示 ####

App.vue

<template>
      <div id="app">
        <div class="link">
          <router-link to="/home">首页</router-link>
          <router-link to="/search">搜索页</router-link>
        </div>
    
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    
    <style scoped>
    .link {
      height: 50px;
      line-height: 50px;
      background-color: #495150;
      display: flex;
      margin: -8px -8px 0 -8px;
      margin-bottom: 50px;
    }
    .link a {
      display: block;
      text-decoration: none;
      background-color: #ad2a26;
      width: 100px;
      text-align: center;
      margin-right: 5px;
      color: #fff;
      border-radius: 5px;
    }
    </style>

Home.vue

<template>
      <div class="home">
        <div class="logo-box"></div>
        <div class="search-box">
          <input type="text">
          <button>搜索一下</button>
        </div>
        <div class="hot-link">
          热门搜索：
          <router-link to="">黑马程序员</router-link>
          <router-link to="">前端培训</router-link>
          <router-link to="">如何成为前端大牛</router-link>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'FindMusic'
    }
    </script>
    
    <style>
    .logo-box {
      height: 150px;
      background: url('@/assets/logo.jpeg') no-repeat center;
    }
    .search-box {
      display: flex;
      justify-content: center;
    }
    .search-box input {
      width: 400px;
      height: 30px;
      line-height: 30px;
      border: 2px solid #c4c7ce;
      border-radius: 4px 0 0 4px;
      outline: none;
    }
    .search-box input:focus {
      border: 2px solid #ad2a26;
    }
    .search-box button {
      width: 100px;
      height: 36px;
      border: none;
      background-color: #ad2a26;
      color: #fff;
      position: relative;
      left: -2px;
      border-radius: 0 4px 4px 0;
    }
    .hot-link {
      width: 508px;
      height: 60px;
      line-height: 60px;
      margin: 0 auto;
    }
    .hot-link a {
      margin: 0 5px;
    }
    </style>

Search.vue

<template>
      <div class="search">
        <p>搜索关键字: 黑马程序员</p>
        <p>搜索结果: </p>
        <ul>
          <li>.............</li>
          <li>.............</li>
          <li>.............</li>
          <li>.............</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'MyFriend',
      created () {
        // 在created中，获取路由参数
      }
    }
    </script>
    
    <style>
    .search {
      width: 400px;
      height: 240px;
      padding: 0 20px;
      margin: 0 auto;
      border: 2px solid #c4c7ce;
      border-radius: 5px;
    }
    </style>

router/index.js

import Home from '@/views/Home'
    import Search from '@/views/Search'
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter) // VueRouter插件初始化
    
    // 创建了一个路由对象
    const router = new VueRouter({
        
      routes: [
        {
         path: '/home', component: Home },
        {
         path: '/search', component: Search }
      ]
    })
    
    export default router

main.js

...
    import router from './router/index'
    ...
    new Vue({
      render: h => h(App),
      router
    }).$mount('#app')

### 5 声明式导航-动态路由传参 ###

#### 1.动态路由传参方式 ####

*  配置动态路由
    
    > 动态路由后面的参数可以随便起名，但要有语义
    
        const router = new VueRouter({
              
          routes: [
            ...,
            {
               
              path: '/search/:words', 
              component: Search 
            }
          ]
        })
 *  配置导航链接
    
    to=“/path/参数值”
 *  对应页面组件**接受参数**
    
    $route.**params**.参数名
    
    > params后面的参数名要和动态路由配置的参数保持一致

#### 2.查询参数传参 VS 动态路由传参 ####

1.  查询参数传参 (比较适合传**多个参数**)
    
    1.  跳转：to=“/path?参数名=值&参数名2=值”
    2.  获取：$route.query.参数名
2.  动态路由传参 (**优雅简洁**，传单个参数比较方便)
    
    1.  配置动态路由：path: “/path/:参数名”
    2.  跳转：to=“/path/参数值”
    3.  获取：$route.params.参数名
    
    注意：动态路由也可以传多个参数，但一般只传一个

#### 3.总结 ####

声明式导航跳转时, 有几种方式传值给路由页面？

*  查询参数传参（多个参数）
 *  动态路由传参（一个参数，优雅简洁）

### 6 动态路由参数的可选符(了解) ###

#### 1.问题 ####

配了路由 path:“/search/:words” 为什么按下面步骤操作，会未匹配到组件，显示空白？

![在这里插入图片描述][b86d427e74e74e7eba56a53907697124.png]

#### 2.原因 ####

/search/:words 表示，**必须要传参数**。如果不传参数，也希望匹配，可以加个可选符"？"

const router = new VueRouter({
        
      routes: [
     	...
        {
         path: '/search/:words?', component: Search }
      ]
    })

[758fa708a3394f3ab2868729bcd9b012.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/7fafb9ec8d374bb28ca64d0efb3cbe34.png
[987125fcacb847cc8c427fbb7a0ac3e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/fb6962e74ef94fca9239bccf6377a7ee.png
[4a3c54443b1944eba1d8d73e3d3a1926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9eceebeb577b48c6baa8eb837784a048.png
[eae7cdbd6c194518bdd5ac8ad80ad2b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/33a245cf430a45f9a4ba23c2f4213ae6.png
[ea2ff0a8b6e24f78bf9d45c60d23395a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/23b25f450c5f4947b9e4fb01fd1d65b0.png
[91a092a28eea402b9358058e1c11db7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e49c696c1c0445129e2afbeb27161b43.png
[b86d427e74e74e7eba56a53907697124.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/01b0d85a848844dd86078bb5d21cb992.png