Vue2 VueRouter学习笔记

Swis_BMQ

于 2024-09-06 17:15:03 发布

阅读量1.2k

点赞数 9

文章标签：学习笔记 vue.js

本文链接：https://blog.csdn.net/m0_52458424/article/details/141947537

版权

VueRouter

官方文档
版本对应
vue2：3.x.x
vue3：4.x.x

路由：访问路径与vue组件（页面）之间的映射关系
VueRouter：Vue官方提供的插件，本质上是一个 JavaScript 库，用于在 Vue.js 应用中实现路由功能

这里以vue2项目为例，版本3.6.5

1. 配置插件

VueRouter是一个第三方js库，类比axios，需要先下载，然后导入到项目中
下载：

npm install vue-router@3.6.5

导入：

import VueRouter from 'vue-router';

注册插件：把插件的功能添加到Vue构造函数中，给Vue实例对象添加了router和route属性

Vue.use(VueRouter);

创建路由器实例：

const router = new VueRouter({
  routes: []
});

把路由器注入到Vue实例：给router属性赋值

new Vue({
  el: '#app',
  router, // 将路由器传递给 Vue 实例 router: router
  render: h => h(App)
});

2. 基本使用

vue组件可以当页面，也可以当标签组件，页面组件一般写在views目录下

下面我准备了3个页面
准备页面
注册路由

import FindMusic from './views/FindMusic.vue'
import MyInfo from './views/MyInfo.vue'
import MyFriends from './views//MyFriends.vue'

...

const router = new VueRouter({
  routes:[
    { path: '/find', component: FindMusic },
    { path: '/friend', component: MyFriends },
    { path: '/me', component: MyInfo }
  ]
})

...

使用

<template>
  <div id="app">
    <div class="nav">
      <a href="#/find">发现音乐</a>
      <a href="#/friend">我的好友</a>
      <a href="#/me">我</a>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

效果如下：
路由跳转

3. 项目开发

新建一个router目录用来存放router对象，用来专门维护路由
最后在main.js中导入这个对象就可以了
路由目录
修改代码，index.js内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

import FindMusic from '@/views/FindMusic.vue' // src目录 = @
import MyInfo from '@/views/MyInfo.vue'
import MyFriends from '@/views//MyFriends.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes:[
    { path: '/find', component: FindMusic },
    { path: '/friend', component: MyFriends },
    { path: '/me', component: MyInfo }
  ]
})

export default router

声明式导航

单纯使用a标签进行界面跳转，需要记住当前所在的路由页面以实现高亮效果
vue-router提供了一个全局组件 <router-link>取代a标签，本质上就是在a标签的基础上简化了代码

<router-link to="/find">发现音乐</router-link>
<router-link to="/friend">我的好友</router-link>
<router-link to="/me">我</router-link>

使用to代替href，可以不用写#号
给当前路由页面对应的a标签自动添加了类：router-link-active，给该类添加样式实现高亮
router-link-active只要界面在一级目录下，就可高亮，用的多
router-link-exact-active界面必须在指定界面才高亮
这两个类名可以自定义，上面的是默认值
```
a.router-link-active {
    color: gold;
  }
```

跳转传参

本质上就是给目标组件对象传值。在注册路由的时候，相当于把route对象赋值给了目标组件的route属性了，你也可以通过给route对象设置属性传值

1 查询参数传参
传过去就是url传参的原理，to里面/path?参数名1=值1&参数名2=值2
拿值：在当前组件的route属性里拿，this.$route.query.参数名

演示：

<router-link to="/find?key=你好">发现音乐</router-link>

获得参数
实际效果

2 动态路由传参（适合单个参数）
路由：/path/:参数名 后面加个?表示参数非必须
to：/path/参数值
获取：this.$route.params.参数名

修改path
实际效果
重定向
redirect: 目标路径

当路由定位不到，找不到页面的时候可以配置404页面，但是必须在最后一个注册，path:'*'

跳转不出现#号
hash模式：基于a标签，带#号
history模式：不带#号，常用，h5新增，需要服务端支持

编程式导航

通过js代码实现页面跳转，可以通过触发事件实现跳转

可以这样理解（实际更复杂），router对象中维持了一个栈（先进后出）。如果需要跳转路由，相当于将一个route对象添加进栈

this.$router.push({ path: '/user', query: { id: 123 } });

// 如果路由可以直接写路径或者route对象的name
this.$router.push('/user');

参数多的话写对象会更方便一点

类比分析
进栈：this.$router.push() 将新路由添加到浏览器的历史记录中，就像将一个新元素压入栈中。
出栈：this.$router.go(-1) 或 this.$router.back() 会让浏览器回到上一个历史记录条目，就像从栈顶弹出元素。
栈顶：当前显示的路由相当于栈顶的元素，是最近的导航记录。

二级路由

注册组件时，route对象中children:[ ]实现嵌套路由

export default new Router({
  mode: 'history', // 使用历史模式以避免 URL 中的 hash
  routes: [
    {
      path: '/parent',
      component: ParentComponent,
      children: [
        {
          path: 'child-a', // 注意这里不需要 /parent/ 的前缀
          component: ChildComponentA
        },
        {
          path: 'child-b',
          component: ChildComponentB
        }
      ]
    }
  ]
});