vue2Day06----路由

1.什么是单页面应用程序?

所有的功能在一个html页面上

2.单页面应用优缺点?

优点：按需更新性能高，开发效率高，用户体验好

缺点：学习成本，首屏加载慢，不利于SEO

3.单页应用场景？

系统类网站，内部网站，文档类网站，移动端站点

4.单页之所以开发效率高，用户体验好最大的原因：页面按需更新

二、路由介绍

1.思考：

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

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

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

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

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

2.路由的介绍

生活中的路由：设备和ip的映射关系

Vue中的路由：路径和组件的映射关系

3.总结

什么是路由？路由是一种映射关系

Vue中的路由是什么路径和组件的映射关系

三、路由的基本使用

1.目标：认识插件 VueRouter，掌握 VueRouter 的基本使用步骤

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

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

4.官网：<https://v3.router.vuejs.org/zh/\>

5.VueRouter的使用（5+2）

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

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

bash 复制代码

   yarn add vue-router@3.6.5

main.js中引入VueRouter

bash 复制代码

   import VueRouter from 'vue-router'

安装注册

bash 复制代码

  Vue.use(VueRouter)

创建路由对象

bash 复制代码

 const router = new VueRouter()

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

bash 复制代码

 new Vue({

     render: h => h(App),

     router:router

   }).$mount('#app')

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

6.两个核心步骤

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

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

javascript 复制代码

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

8.总结：

如何实现路径改变，对应组件切换,应该使用哪个插件?

Vue官方插件VueRouter

Vue-Router的使用步骤是什么(5+2)?

五个基础步骤：(1)下包 (2) 引入 (3) Vue.use安装注册 (4) 创建路由对象 (5)注入Vue实例

两个核心步骤：(1) 创建组件，配置规则(路径组件的匹配关系)

(2)配导航，配置路由出口 router-view(组件展示的位置)

四、组件的存放目录问题

注意： vue文件本质无区别

1.组件分类

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

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

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

2.存放目录 ：分类开来的目的就是为了更易维护

1. src/views文件夹

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

2. src/components文件夹

复用组件 - 展示数据 - 封装复用

五、路由的封装抽离

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

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

3.路径简写：

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

4.总结：

路由模块的封装抽离的好处是什么？

拆分模块，利于维护

以后如何快速引入组件？

基于@指代src目录，从src目录出发找组件

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

1.需求:实现导航高亮效果

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

2.解决方案：vue-router 提供了一个全局组件 router-link (取代 a 标签)

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

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

语法： <router-link to="path的值">发现音乐</router-link>

javascript 复制代码

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

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

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

`router-link-exact-active` 和 `router-link-active`

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

4.总结

router-link是什么？

vue-router提供的全局组件，用于替换a标签

router-link怎么用？

<router-link to="/路径值"></router-link>

router-link的好处是什么？

能跳转，能高亮（自带激活时的类名）

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

当我们使用<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.在地址栏中输入二级路由查看类名的添加

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

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

2.解决方案

我们可以在创建路由对象时，额外配置两个配置项即可。(记link就好，会自动补全)

`linkActiveClass` 和 `linkExactActiveClass`

javascript 复制代码

const router = new VueRouter({

  routes: [...],

  linkActiveClass: "类名1",

  linkExactActiveClass: "类名2"

})

3.代码演示

javascript 复制代码

// 创建了一个路由对象

const router = new VueRouter({

  routes: [

    ...

  ],

  linkActiveClass: 'active', // 配置模糊匹配的类名

  linkExactActiveClass: 'exact-active' // 配置精确匹配的类名

})

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

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

比如：现在我们在搜索页点击了热门搜索链接，跳转到详情页，

需要把点击的内容带到详情页，该怎么办呢？

2.跳转传参

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

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

3.查询参数传参

如何传参？

<router-link to="/path?参数名=值"></router-link>

如何接受参数

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

4.查询参数传参----代码演示

App.vue

javascript 复制代码

<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

javascript 复制代码

<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

javascript 复制代码

<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

javascript 复制代码

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

javascript 复制代码

import router from './router/index'
...

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

```

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

1.动态路由传参方式：

(1)配置动态路由 ---> 动态路由后面的参数可以随便起名，但要有语义

：不能省略，/search/:words 代表/search后面的都能匹配

javascript 复制代码

  const router = new VueRouter({
    routes: [
      ...,
      {
        path: '/search/:words',

        component: Search
      }
    ]
  })

(2)配置导航链接

to="/path/参数值"

(3)对应页面组件接收参数

$route.**params**.参数名

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

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

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

跳转：to="/path?参数名=值&参数名2=值"

获取：$route.query.参数名
(2) 动态路由传参 (**优雅简洁**，传单个参数比较方便)

配置动态路由：path: "/path/:参数名"

跳转：to="/path/参数值"

获取：$route.params.参数名

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

3.总结

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

①查询参数传参(多个参数)

跳转：to="/path?参数名=值"

接收：$route.query.参数名

②动态路由传参(简洁优雅)

路由：/path/:参数名

跳转: to="/path/值"

接收：$route.params.参数名

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

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

2.原因：

/search/:words 表示必须要传参数

如果不传参数，也希望匹配，可以加个可选符？

javascript 复制代码

const router = new VueRouter({

  routes: [

  ...

    { path: '/search/:words?', component: Search }

  ]

})

十二、Vue路由--重定向

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

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

3.语法

{ path: 匹配路径, redirect: 重定向到的路径 },

比如：

{ path:'/' ,redirect:'/home' }

4.代码演示 router文件夹下的index.js里的

javascript 复制代码

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

十三、Vue路由--404

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

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

3.语法：

path里的 "*" 意思是前面不匹配就命中最后这个

{ path:"*" ,redirect:重定向的路径}

javascript 复制代码

import NotFind from '@/views/NotFind'

const router = new VueRouter({

  routes: [

    ...

    { path: '*', component: NotFind } //最后一个

  ]

})

4.代码示例：含NotFound.vue和index.js中的修改

NotFound.vue

javascript 复制代码

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

router/index.js

javascript 复制代码

...
import NotFound from '@/views/NotFound'
...

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
     ...

    { path: '*', component: NotFound }

  ]
})
export default router

十四、Vue路由-模式设置

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

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

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

2.语法： mode:'histroy',

javascript 复制代码

const router = new VueRouter({
    mode:'histroy', //默认是hash，现在修改后是history路由
    routes:[]
})

十五、编程式导航-两种路由跳转方式

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

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

3.语法

两种语法：

path 路径跳转（简易方便）

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

4.path路径跳转语法特点：简易方便

javascript 复制代码

//简单写法
this.$router.push('路由路径')

//完整写法
this.$router.push({

  path: '路由路径'
})

5.代码演示：path跳转方式

6.name命名路由跳转特点：适合 path 路径长的场景

语法：路由规则，必须配置name配置项；通过name来进行跳转

javascript 复制代码

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

//通过name来进行跳转

  ```js
  this.$router.push({

    name: '路由名'

  })
  ```

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

8.总结

编程式导航有几种跳转方式？

① 通过路径跳转 (简易方便)

this.$router.push('路由路径') //方式1

this.$router.push({ //方式2

path：'路由路径'

})
② 通过路由名字跳转(适合路径名字长的场景)

this.$router.push({

name：'路由名

})

{ name:'路由名', path:'/path/xxx',... }, //这个要提前在js里配好name

十六、编程式导航-path路径跳转传参

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

2.两种传参方式

① path 路径跳转传参

1.查询参数

简写：(1) this.$router.push('路由路径?参数名=参数值')

完整写法：更适合传参

(2) this.$router.push({

path: '路由路径'

query:{

参数名：参数值,

参数名：参数值

}

})

2.动态路由传参

② name 命名路由跳转传参

1.query传参

2.params传参

注意：path不能配合params使用

注：本文是观看bilibili视频后结合老师笔记做的笔记，原视频链接:【前端最新Vue2+Vue3基础入门到实战项目全套教程，自学前端vue就选黑马程序员，一套全通关！】 https://www.bilibili.com/video/BV1HV4y1a7n4/?p=80\&share_source=copy_web\&vd_source=c49c86c0acb198e4f36c3648d2b132e9