Vue2：路由1-阿里云开发者社区

Vue2：路由

Date: May 28, 2023

Sum: vue-router基本使用、高级用法

单页面应用程序

概念：SPA【Single Page Application】是指所有的功能都在一个html页面上实现

案例：

单页应用网站：网易云音乐 https://music.163.com/

多页应用网站：京东 https://jd.com/

**单页应用 VS 多页面应用：

单页应用类网站：系统类网站 / 内部网站 / 文档类网站 / 移动端站点

多页应用类网站：公司官网 / 电商类网站

特点：

单页面应用程序将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和 CSS）。

一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用JavaScript 动态地变换 HTML 的内容，从而实现页面与用户的交互。

注意：SPA它是按需更新的，并不是整体更新。因此，它需要更加关注访问路径与组件的对应关系

优点：

SPA 单页面应用程序最显著的 3 个优点如下：

① 良好的交互体验

单页应用的内容的改变不需要重新加载整个页面

获取数据也是通过 Ajax 异步获取

没有页面之间的跳转，不会出现“白屏现象”

② 良好的前后端工作分离模式

后端专注于提供 API 接口，更易实现 API 接口的复用

前端专注于页面的渲染，更利于前端工程化的发展

③ 减轻服务器的压力

服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍

缺点：

任何一种技术都有自己的局限性，对于 SPA 单页面应用程序来说，主要的缺点有如下两个：

① 首屏加载慢

可以通过路由懒加载、代码压缩、CDN 加速、网络传输压缩处理

② 不利于 SEO

SSR 服务器端渲染

如何快速创建 vue 的 SPA 项目

vue 官方提供了两种快速创建工程化的 SPA 项目的方式：

① 基于 vite 创建 SPA 项目 ② 基于 vue-cli 创建 SPA 项目

总结：

概念：一个Web网站中只有唯一一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。

特点：

1.集中所有功能于单页面中，仅在该页面初始化时加载相应的资源。

2.通过JS动态变换页面内容，从而实现页面与用户的交互

优点：

1.良好的交互体验

没有页面跳转，不会有“白屏”现象

2.良好的前后端分离模式

前端专注页面渲染，更利于前端工程化发展；后端专注提供API接口，更易实现API接口复用

3.减轻服务端的压力

服务器只提供数据，不负责页面的合成与逻辑，吞吐能力提高几倍

缺点：

1.首屏加载慢

可以通过代码压缩、CDN加速、路由懒加载、网络传输压缩处理等

2.不利于SEO

SSR服务器端渲染

前端路由的概念与原理

思考：

单页面应用程序，之所以开发效率高，性能好，用户体验好

最大的原因就是：页面按需更新

比如当点击【发现音乐】和【关注】时，只是更新下面部分内容，对于头部是不更新的

要按需更新，首先就需要明确：访问路径和组件的对应关系！

访问路径和组件的对应关系如何确定呢？路由

路由概念：

概念：路由（英文：router）就是对应关系。路由分为两大类： ① 后端路由 ② 前端路由

回顾：后端路由

后端路由指的是：请求方式、请求地址与 function 处理函数之间的对应关系。

在 node.js 课程中，express路由的基本用法如下：

前端路由：

SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。

结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！

概念：Vue中的路由指路径与组件的映射关系，根据路由就能知道不同路径，应匹配渲染相应组件

通俗易懂的概念：Hash 地址与组件之间的对应关系。

我们点击不同的链接，会切换不同的哈希地址。当哈希地址切换，页面上就会展示对应组件。

工作方式：

① 用户点击了页面上的路由链接

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

结论：前端路由，指的是 Hash 地址与组件之间的对应关系！

实现简易的前端路由：

步骤1：导入并注册 MyHome、MyMovie、MyAbout 三个组件。示例代码如下：

import MyHome from './MyHome.vue'
import MyAbout from './MyAbout.vue'
import MyMovie from './MyMovie.vue'
export default {
  components: {
    MyHome, MyMovie, MyAbout,
  },
}

步骤2：通过标签的 is 属性，动态切换要显示的组件。示例代码如下：

<template>
  <div>
    <h1>App.vue</h1>
    <component :is="comName">This is a test</component>
  </div>
</template>
export default {
  data() {
    return {
      comName: 'MyName', // 要展示的组件的名称
    }
  },
}

步骤3：在组件的结构中声明如下 3 个链接，通过点击不同的链接，切换浏览器地址栏中的 Hash 值：

<a href="#/home">Home</a>&nbsp;
<a href="#/movie">Movie</a>&nbsp;
<a href="#/about">About</a>

步骤4：在 created 生命周期函数中监听浏览器地址栏中 Hash 地址的变化，动态切换要展示的组件的名称：

window.onhashchange = () => {
    switch(location.hash) {
      case '#/home': // 点击了“首页”的链接
        this.comName = 'my-home'
        break
      case '#/movie': // 点击了“电影”的链接
        this.comName = 'my-movie'
        break
      case '#/about': // 点击了“关于”的链接
        this.comName = 'my-about'
        break
    }
  }
},

Code: App.vue

<template>
  <div>
    <h1>App.vue</h1>
    <a href="#/home">Home</a>&nbsp;
    <a href="#/movie">Movie</a>&nbsp;
    <a href="#/about">About</a>&nbsp;
    <hr />
    <component :is="comName">This is a test</component>
  </div>
</template>
<script>
import MyHome from '../01.easy-router/MyHome.vue'
import MyAbout from '../01.easy-router/MyAbout.vue'
import MyMovie from '../01.easy-router/MyMovie.vue'
export default {
  name: 'MyApp',
  data() {
    return {
      comName: 'MyName',
    }
  },
  components: {
    MyHome, MyMovie, MyAbout,
  },
  created() {
    window.onhashchange = () => {
      switch(location.hash) {
        case '#/home': // 点击了“首页”的链接
          this.comName = 'my-home'
          break
        case '#/movie': // 点击了“电影”的链接
          this.comName = 'my-movie'
          break
        case '#/about': // 点击了“关于”的链接
          this.comName = 'my-about'
          break
      }
    }
  },
}
</script>
<style lang="scss" scoped>
</style>

vue-router 的基本使用

基础概念：

概念：

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

作用：修改地址栏路径时，切换显示匹配的组件

版本：

vue-router 目前有 3.x 的版本和 4.x 的版本。其中：

vue-router 3.x 只能结合 vue2 进行使用

vue-router 4.x 只能结合 vue3 进行使用

vue-router 3.x 的官方文档地址：https://router.vuejs.org/zh/

vue-router 4.x 的官方文档地址：https://next.router.vuejs.org/

补充官网：https://v3.router.vuejs.org/zh/

说明：Vue 官方的一个路由插件，是一个第三方包

VueRouter 3.x的使用（5+2）

固定5个固定的步骤（不用死背，熟能生巧）

1-下载 VueRouter 模块到当前工程，版本3.6.5

yarn add vue-router@3.6.5
npm install vue-router@3.6.5

2-main.js中引入VueRouter

import VueRouter from 'vue-router'

3-安装注册

Vue.use(VueRouter)

4-创建路由对象

const router = new VueRouter()

5-注入，将路由对象注入到new Vue实例中，建立关联

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

当我们配置完以上5步之后就可以看到浏览器地址栏中的路由变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

案例：

main.js

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化
const router = new VueRouter()
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

**两个核心步骤:

1-创建需要的组件 (views目录)，配置路由规则

2-配置导航，配置路由出口(路径匹配的组件显示的位置)

代码中的router-view是用来匹配导航栏的位置的，如果它在代码的上/下面，那么导航栏也在上/下面

如下图所示：

App.vue

<div class="footer_wrap">
  <a href="#/find">发现音乐</a>
  <a href="#/my">我的音乐</a>
  <a href="#/friend">朋友</a>
</div>
<div class="top">
  <router-view></router-view>
</div>

案例：

Code:

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  // routes 路由规则们
  // route 一条路有规则 { path: 路径， component: 组件}
  routes: [
    { path: '/find', component: Find},
    { path: '/my', component: My},
    { path: '/friend', component: Friend},
  ]
})
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

App.vue

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <!-- 路由出口：匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style>
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;
}
</style>

vue-router 4.x的基本使用步骤：

vue-router 4.x 的基本使用步骤

① 在项目中安装 vue-router

② 定义路由组件

③ 声明路由链接和占位符

④ 创建路由模块

⑤ 导入并挂载路由模块

3.1 在项目中安装 vue-router

在 vue3 的项目中，只能安装并使用 vue-router 4.x。安装的命令如下：

npm install vue-router@next -S

注意：包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。

3.2 定义路由组件

在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件，将来要使用 vue-router 来控制它们的展示与切换：

MyAbout, 其余同理：

<template>
  <h3>MyAbout</h3>
</template>
<script>
export default {
  name: 'MyAbout'
}
</script>
<style>
</style>

3.3 声明路由链接和占位符

可以使用标签来声明路由链接，并使用标签来声明路由占位符。

示例代码如下:

<template>
  <div>
    <h1>MyApp</h1>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link>&nbsp;
    <router-link to="/movie">电影</router-link>&nbsp;
    <router-link to="/about">关于</router-link>
    <hr />
    <!-- 路由的占位符 -->
    <router-view></router-view>
  </div>
</template>

注意：在声明哈希属性时，需要用to属性来声明，而且哈希地址不再需要以#开头，vue中的router会自动为我们添加#。

3.4 创建路由模块

在项目中创建 router.js 路由模块，在其中按照如下 4 个步骤创建并得到路由的实例对象：

① 从 vue-router 中按需导入两个方法

② 导入需要使用路由控制的组件

③ 创建路由实例对象

④ 向外共享路由实例对象

⑤ 在 main.js 中导入并挂载路由模块

从 vue-router 中按需导入两个方法

// 1. 从 vue-router 中按需导入两个方法
// createRouter 方法用于创建路由的实例对象
// createWebHashHistory 用于指定路由的工作模式（hash模式）
import { createRouter, createWebHashHistory } from 'vue-router'

导入需要使用路由控制的组件

//2. 导入组件，这些组件将要以路由的方式，来控制它们的切换
import MyHome from './MyHome.vue'
import MyMoive from './MyMoive.vue'
import MyAbout from './MyAbout.vue'

创建路由实例对象

// 3. 创建路由实例对象
const router = createRouter({
  // 3.1 通过 history 属性指定路由的工作模式
  history: createWebHashHistory(),
  // 3.2 通过 routes 数组，指定路由规则
  routes: [
    // path 是 hash 地址， component 是要展示的组件
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About },
  ]
})

向外共享路由实例对象

// 4. 向外共享路由实例对象，
//   供其他模块导入并使用
export default router

在 main.js 中导入并挂载路由模块

import { createApp } from 'vue'
import App from './components/App.vue'
import './index.css'
// 1. 导入路由模块
import router from './components/02.start/router'
const app = createApp(App)
// 2. 挂载路由模块
// app.use() 方法用来挂载“第三方的插件模块”
app.use(router)
app.mount('#app')

效果：

整体流程:

当我们点击电影时，地址栏会切换成 #/movie，当哈希地址发生变化，就会被路由模块所监听到，然后进行哈希地址的匹配：

// router.js
routes: [
    // path 是 hash 地址， component 是要展示的组件
    { path: '/home', component: MyHome },
    { path: '/movie', component: MyMovie },
    { path: '/about', component: MyAbout },
  ]

当匹配到，我们就会把相应的组件比如MyMovie放到App.vue中的路由占位符中

// App.vue
<template>
  <div>
    <h1>MyApp</h1>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
    <hr />
    <!-- 路由的占位符 -->
    <router-view></router-view>
  </div>
</template>

组件的存放目录问题

注意： .vue文件本质无区别

组件分类：

.vue文件分为2类，都是 .vue文件（本质无区别）

页面组件（配置路由规则时使用的组件）

复用组件（多个组件中都使用到的组件）

存放目录：

分类开来的目的就是为了 更易维护

1.src/views

文件夹页面组件 - 页面展示 - 配合路由用

2.src/components

文件夹复用组件 - 展示数据 - 常用于复用

路由的封装抽离

问题：所有的路由配置都在main.js中合适吗？

目标：将路由模块抽离出来。好处：拆分模块，利于维护

路径简写：

脚手架环境下 @指代src目录，可以用于快速引入组件

具体书写：

index.js

import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'
// 1. 导入Vue
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  // routes 路由规则们
  // route 一条路有规则 { path: 路径， component: 组件}
  routes: [
    { path: '/find', component: Find},
    { path: '/my', component: My},
    { path: '/friend', component: Friend},
  ]
})
// 2. 导出
export default router

main.js

import Vue from 'vue'
import App from './App.vue'
// 3. 导入 router
import router from './router/index'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

App.vue

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <!-- 路由出口：匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style>
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;
}
</style>

声明式导航

导航链接

需求：实现导航高亮效果

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

**解决方案：

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

能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签，to 无需 #

能高亮，默认就会提供高亮类名，可以直接设置高亮样式

语法：发现音乐

<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>

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

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

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

代码：

Code:

App.vue

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="friend">我的音乐</router-link>
      <router-link to="my">我的朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style>
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.router-link-active {
  background-color: purple;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

两个类名

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

router-link-active

模糊匹配（用的多）

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

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

router-link-exact-active

精确匹配

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

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

理解：即使地址栏后面加上了 /one ，也就是所谓的二级地址，我们通过模糊匹配router-link-active

也能够让他变色。

自定义类名

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

解决方案

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

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

详细操作过程：

Style:

.footer_wrap a.router-link-active {
  background-color: purple;
}

经过main.js配置过后

const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ],
  // link 自定义高亮
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active'
})

style可以简化成如下：

.footer_wrap a.active {
  background-color: purple;
}

跳转传参：

目标：在跳转路由时，进行传参

比如：当在搜索页点击了热门搜索链接，跳转到详情页，要把点击的内容带到详情页，该怎么办呢？

**跳转传参：

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

查询参数传参

动态路由传参

**查询参数传参：

如何传参？

如何接受参数固定用法：

$router.query.参数名

案例：

Code:

Home.vue

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员?key=test">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FindMusic',
  data() {
    return {
      inpValue: '',
    }
  },
  methods: {
    goSearch() {
      this.$router.push(`/search${this.inpValue}`)
    }
  }
}
</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中，获取路由参数
    // this.$route.query.参数名 获取
    console.log(this.$route.query.key);
  }
}
</script>
<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

注意：如果在像created这种的js代码中，不要忘记加上this.

动态路由传参方式：

配置动态路由步骤：

1-配置动态路由

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

index.js

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

2-配置导航链接

Home.vue

to="/path/参数值"

3-对应页面组件接受参数

Search.vue

{{ $route.params.参数名 }}

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

案例：

Code:

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 },
    // *** 1, 配置动态路由
    { path: '/search/:words', component: Search }
  ]
})
export default router

Home.vue

// *** 2, 配置导航链接
<router-link to="/search/letstry">Vue-test</router-link>

Search.vue

<template>
  <div class="search">
    <!-- *** 3， 对应页面组件接收参数 -->
    <p>搜索关键字: {{ $route.params.words }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取
    console.log(this.$route.query.key);
  }
}
</script>
<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

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

1.查询参数传参 (比较适合传多个参数)

1.跳转：to=“/path?参数名=值&参数名2=值”

2.获取：$route.query.参数名

2.动态路由传参 (优雅简洁，传单个参数比较方便)

1.配置动态路由：path: “/path/:参数名”

2.跳转：to=“/path/参数值”

3.获取：$route.params.参数名

注意：动态路由也可以传多个参数，但一般只传一个

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

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

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

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

Vue路由

重定向

**问题：**网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空

解决方案：重定向 → 匹配 / 后, 强制跳转 /home 路径

语法：

{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }

代码：

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home'},
   ...
  ]
})

404

**作用：**当路径找不到匹配时，给个提示页面

位置：404的路由，虽然配置在任何一个位置都可以，但一般都配置在其他路由规则的最后面

**语法：**path: “*” (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'
const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

模式设置

问题：

路由的路径看起来不自然, 有#，能否切成真正路径形式?

hash路由(默认) 例如: http://localhost:8080/#/home

history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)

理解：

1-hash模式：底层是由a标签，锚链接实现的

2-history模式：由新增的HTML5中的historyAPI实现

语法：

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

注意：一旦采用了 histroy 模式，地址栏就没有 # ，需要后台配置访问规则

两种路由跳转方式

两种路径直接跳转

**问题：**点击按钮跳转如何实现？

**方案：**编程式导航：用JS代码来进行跳转

语法：

两种语法：

path 路径跳转（简易方便）

name 命名路由跳转 (适合 path 路径长的场景)

path路径跳转语法：

特点：简易方便

Home.vue

//简单写法
this.$router.push('路由路径')
//eg
this.$router.push(`/search${this.inpValue}`)
//完整写法
this.$router.push({
  path: '路由路径'
})

代码：

Code:

export default {
  name: 'FindMusic',
  methods: {
    goSearch() {
      // Plan1: 简易写法
      // this.$router.push('/search')
      // Plan2: 完整写法
      this.$router.push({
        path: '/search'
      })
    }
  }
}

**name命名路由跳转：

特点：适合 path 路径长的场景

语法：

路由规则，必须配置name配置项

index.js

{ name: '路由名', path: '/path/xxx', component: XXX },

通过name来进行跳转

Home.vue

this.$router.push({
  name: '路由名'
})

理解：给routes下的route起别名，方便自己之后push路径

代码演示通过name命名路由跳转:

Code:

index.js

{ name: 'test', path: '/search', component: Search}

Home.vue

export default {
  name: 'FindMusic',
  methods: {
    goSearch() {
      this.$router.push({
        name: 'search',
      })
    }
  }
}

问题：点击搜索按钮，跳转需要把文本框中输入的内容传到下一个页面如何实现？

**两种传参方式：

1.查询参数

2.动态路由传参

Vue2：路由1

Vue2：路由

单页面应用程序

前端路由的概念与原理

思考：

路由概念：

前端路由：

vue-router 的基本使用

基础概念：

VueRouter 3.x的使用（5+2）

vue-router 4.x的基本使用步骤：

组件的存放目录问题

路由的封装抽离

声明式导航

导航链接

两个类名

自定义类名

跳转传参：

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

Vue路由

重定向

404

模式设置

两种路由跳转方式

两种路径直接跳转

热门文章

最新文章

相关课程

相关电子书