Vue2之路由3 声明式导航router-link使用以及传参

原创于 2025-08-25 08:30:00 发布 · 1.2k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

27 篇文章

订阅专栏

文章目录

准备
一、声明式导航-导航链接
二、声明式导航-两个类名
四、声明式导航-查询参数传参
五、声明式导航-动态路由传参
六查询参数传参 VS 动态路由传参

准备

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '@/views/Friend.vue'

Vue.use(VueRouter) // VueRouter插件初始化


const router = new VueRouter({
  routes: [
    { path: '/Find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend }
  ]
})


export default router

src/app.vue

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find?id=1">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}

//  路由激活样式
.footer_wrap .active {
  background-color: purple;
}
</style>

src/views/Find.vue

<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>

</style>

src/views/Friend.vue

<template>
  <div>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
  </div>
</template>

<script>
export default {
  name: 'MyFriend'
}
</script>

<style>

</style>

src/views/my.vue

<template>
  <div>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
  </div>
</template>

<script>
export default {
  name: 'MyMusic'
}
</script>

<style>

</style>

项目目录

在这里插入图片描述

运行结果

在这里插入图片描述

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

1.1 需求

实现导航高亮效果在这里插入图片描述

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

1.2 解决方案

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

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

vue语法：发现音乐
css语法：.router-link-active:这个类是router中router-link标签自带的。可以通过元素检查查看。

<template>
  <div>
    <div class="footer_wrap">
      <!-- 这个to必须加 -->
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}

//  路由激活样式
.footer_wrap .router-link-active {
  background-color: purple;
}
</style>

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

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

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

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

当我们使用<router-link></router-link>跳转时，自动给当前导航加了两个类名

在这里插入图片描述

1.router-link-active

模糊匹配（用的多）

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

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

2 .router-link-exact-active

精确匹配

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

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

.router-link-active演示

在这里插入图片描述

.router-link-exact-active演示

在这里插入图片描述

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

1.问题

router-link的两个高亮类名太长了，我们希望能定制怎么办。在这里插入图片描述

2.解决方案

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

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

在这里插入图片描述

3.代码演示

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '@/views/Friend.vue'

Vue.use(VueRouter) // VueRouter插件初始化


const router = new VueRouter({
  routes: [
    { path: '/Find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend }
  ],
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active"
})
export default router

app.vue

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}

//  路由激活样式
.footer_wrap .active {
  background-color: purple;
}
</style>

运行结果

在这里插入图片描述

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

1.目标

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

2.跳转传参

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

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

3.查询参数传参

如何传参？

<router-link to="/path?参数名=值"></router-link>
如何接受参数

固定用法：$router.query.参数名

4 演示

修改src/views/Find.vue

<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <!-- 跳转到my页面 -->
    <div class="bottom">
      <router-link to="/my?id=1&name=朋友">朋友</router-link>
      <router-link to="/my?id=2&name=偏爱">偏爱</router-link>
      <router-link to="/my?id=3&name=此生不换">此生不换</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>

</style>

修改src/views/My.vue

<template>
  <div>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <!--数据展示-->
     {{ id }}--{{ name }}
  </div>
</template>

<script>
export default {
  name: "MyMusic",
  data() {
    return {
    // 添加属性
      id: null,
      name: null,
    };
  },
  mounted() {
  	// 页面加载时获取
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
  },
};
</script>

<style>
</style>

运行结果

在这里插入图片描述

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

1.动态路由传参方式

配置动态路由

动态路由后面的参数可以随便起名，但要有语义

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

配置导航链接

to=“/path/参数值”
对应页面组件接受参数

$route.params.参数名

params后面的参数名要和动态路由配置的参数保持一致

2 代码展示

修改src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '@/views/Friend.vue'

Vue.use(VueRouter) // VueRouter插件初始化


const router = new VueRouter({
  routes: [
    { path: '/Find', component: Find },
    { path: '/my', component: My },
    // 添加一个动态路由，用于匹配 /friend/:id
    { path: '/friend/:id', component: Friend }
  ],
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active"
})


export default router

修改src/views/Find.vue

<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <!-- 跳转到my页面 -->
    <div>
      <h3>跳转到my页面</h3>
      <router-link to="/my?id=1&name=朋友">朋友</router-link>
      <router-link to="/my?id=2&name=偏爱">偏爱</router-link>
      <router-link to="/my?id=3&name=此生不换">此生不换</router-link>
    </div>

    <!-- 跳转页面friend页面 -->
    <div  style="border: 1px solid red; padding: 10px; margin: 10px 0">
      <h3>动态参数跳转页面friend页面</h3>
      <router-link to="/friend/1">朋友</router-link>
      <router-link to="/friend/2">偏爱</router-link>
      <router-link to="/friend/3">此生不换</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>

</style>

修改src/views/friend.vue

<template>
  <div>
    <h3>fing页面传入的参数：{{id}}</h3>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  data () {
    return {
      id:null
    }
  },
  created () {
    this.id = this.$route.params.id
  }
}
</script>

<style>

</style>

演示

在这里插入图片描述

3 上面代码有bug

问题

当我们点击朋友直接跳转发现是空白，只有点击链接时才生效。
在这里插入图片描述

原因

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

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

代码演示

修改index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '@/views/Friend.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/Find', component: Find },
    { path: '/my', component: My },
    // 添加一个可选符
    { path: '/friend/:id?', component: Friend }
  ],
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active"
})


export default router

运行结果

在这里插入图片描述

六查询参数传参 VS 动态路由传参

我这里简单总结一下

查询参数传参 (比较适合传多个参数)
- 跳转：<router-link to="/path?参数名=值&参数名2=值">XXX</router-link>
- 无需在index.js中配置
- 跳获取：$route.query.参数名。因为是使用问号拼接的
- 跳动态路由传参 (优雅简洁，传单个参数比较方便)
动态路由传参： (优雅简洁，传单个参数比较方便)
- 跳转：<router-link to="/path/参数值">XXX</router-link>
- 需在index.js中配置{ path: '/path/:id?', component: 组件}
- 跳获取：$route.params.参数名
- 跳注意：动态路由也可以传多个参数，但一般只传一个