Vue--声明式导航

青旅半醒 2024-03-17 23:29 95阅读 0赞

### 一、声明式导航-导航链接 ###

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

实现导航高亮效果

![68249204474][]

如果使用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属性添加高亮样式即可实现功能

### 二、声明式导航-两个类名 ###

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

![68249312105][]

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

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

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

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

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

**精确匹配**

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

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

### 三、声明式导航-自定义类名（了解） ###

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

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

![68249361091][]

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

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

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

![68249372945][]

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

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

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

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

在跳转路由时，进行传参

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

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

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

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

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

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

*  如何传参？
 *  如何接受参数
    
    固定用法：$route.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="/search?key=如何不秃头">如何不秃头</router-link>
            <router-link to="/search?key=消失的坤">消失的坤</router-link>
            <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link>
          </div>
        </div>
      </template>
      
      <script>
      export default {
          
       
      }
      </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>搜索关键字: {
       { $route.query.key }}</p>
          <p>搜索结果: </p>
          <ul>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
            <li>.............</li>
          </ul>
        </div>
      </template>
      
      <script>
      export default {
          
        name: 'MyFriend',
        created () {
          
          // 在created中，获取路由参数
          console.log(this.$route.query);
        }
      }
      </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')

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

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

*  配置动态路由
    
    > 动态路由后面的参数可以随便起名，但要有语义
    
        const router = new VueRouter({
              
          routes: [
            ...,
            {
               
              path: '/search/:words', 
              component: Search 
            }
          ]
        })
        
        // /search/:words  表示必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"
        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.总结 ####

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

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

[68249204474]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1a4cb6de76904abdab8b42f1cb6e269c.png
[68249312105]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/33b0cc9a573f4abebd8e43a8bfd6d805.png
[68249361091]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f6c2b517ea614027844a4a78b32473c9.png
[68249372945]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b15b337e6a4b4562adcda33578e30ea8.png
[839233ad2d204e1f85cac043a9c72311.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d63e0a71c65143759d2cc784fc5fe143.png