Vue2+Vue3基础入门到实战项目（五）——课程学习笔记

最新推荐文章于 2023-10-25 18:25:49 发布

卡皮巴拉

最新推荐文章于 2023-10-25 18:25:49 发布

阅读量415

点赞数 5

分类专栏： Vue学习文章标签：学习笔记 vue.js javascript

本文链接：https://blog.csdn.net/upgrade_bro/article/details/132547649

版权

Vue学习专栏收录该内容

8 篇文章 19 订阅

订阅专栏

大家好， Capybara 继续与大家一起学习Vue框架。书读百遍其义自见。

day06

路由进阶

路由模块封装

router/index.js

所抽离内容包括：导入组件、（额外需要）导入Vue、导入VueRouter插件、

创建路由对象、导出路由对象

需要注意路径写法（推荐使用绝对路径 @代表当前src目录）

效果：

使用router-link替代a标签实现高亮

本质渲染还是a标签，to无需#，且能高亮

代码：

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

效果：

本质是a元素

自带两个可使用高亮类名：

选中时更改背景颜色：

小结：

精确匹配&模糊匹配

关于两个类名

在url后加上one，仍然匹配（router-link-active）

设置 .router-link-active

小结：

自定义匹配的类名

长有长的好处，不容易重名。

配置代码（router/index.js）：

import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
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' // 配置精确匹配的类名
})

export default router

浏览器可看到，类名发送变化：

小结：

声明式导航-跳转传参

传参方式有两种：

1.查询参数传参

点击链接，从首页跳转到搜索页，希望把链接信息传过去

直接跳转

（不带参数）关键字写死

携带查询参数：

在页面获取参数：

页面显示参数：

如果想要基于参数去发送请求？

在哪发？—— created

获取参

数？this.$route.query.key

2.动态路由传参

代码：

（router/index.js）

import Home from '../views/Home.vue'
import Search from '../views/Search.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/search/:words', component: Search }
  ]
})

export default router

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/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</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>

效果：

两种传参方式的区别

小结：

动态路由参数可选符

路由重定向

redirect

路由404

添加一个NotFound组件

router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

export default router

效果（访问 list 无匹配）：

路由模式

router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  // 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则
  mode: 'history',
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { name: 'search', path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

export default router

编程式导航

用JS代码来进行跳转

1. 通过路径的方式跳转

// (1) this.$router.push('路由路径') [简写]
// this.$router.push('/search')

// (2) this.$router.push({ [完整写法]
// path: '路由路径'
// })
// this.$router.push({
// path: '/search'
// })

2. 通过命名路由的方式跳转

(需要给路由起名字) 适合长路径
// this.$router.push({
// name: '路由名'
// })

router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  // 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则
  mode: 'history',
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { name: 'search', path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

export default router

Home.vue

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  methods: {
    goSearch () {
      // 1. 通过路径的方式跳转
      // (1) this.$router.push('路由路径') [简写]
      // this.$router.push('/search')

      // (2) this.$router.push({     [完整写法]
      //         path: '路由路径' 
      //     })
      // this.$router.push({
      //   path: '/search'
      // })

      // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
      //    this.$router.push({
      //        name: '路由名'
      //    })
      this.$router.push({
        name: 'search'
      })
    }
  }
}
</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>

小结：

编程式导航传参 ( 查询参数传参 & 动态路由传参 )

path路径跳转传参

传入输入框内容：

两种传参方式：查询参数传参和动态路由传参都支持

完整写法更适合多参数情况（不用一个一个拼接）

name命名路由跳转传参

在路由中配置动态路由

使用params传参

在所跳转的组件中，通过 $route.params.参数名 获取传入参数值

代码：

router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  // 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则
  mode: 'history',
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { name: 'search', path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

export default router

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/黑马程序员">黑马程序员</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 () {
      // 1. 通过路径的方式跳转
      // (1) this.$router.push('路由路径') [简写]
      //     this.$router.push('路由路径?参数名=参数值')
      // this.$router.push('/search')
      // this.$router.push(`/search?key=${this.inpValue}`)
      // this.$router.push(`/search/${this.inpValue}`)

      // (2) this.$router.push({     [完整写法] 更适合传参
      //         path: '路由路径'
      //         query: {
      //            参数名: 参数值,
      //            参数名: 参数值
      //         }
      //     })
      // this.$router.push({
      //   path: '/search',
      //   query: {
      //     key: this.inpValue
      //   }
      // })
      // this.$router.push({
      //   path: `/search/${this.inpValue}`
      // })



      // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
      //    this.$router.push({
      //        name: '路由名'
      //        query: { 参数名: 参数值 },
      //        params: { 参数名: 参数值 }
      //    })
      this.$router.push({
        name: 'search',
        // query: {
        //   key: this.inpValue
        // }
        params: {
          words: this.inpValue
        }
      })
    }
  }
}
</script>
……

小结：

个人总结

路由导航传参跳转三问：

1.哪种路由导航？

2.传参方式是什么？

3.如果是编程式导航，跳转方式是什么？

路由导航的种类有两种：

1.声明式导航——使用router-link组件，点击后跳转路由跳转的方法：<router-link to=" ">

2.编程式导航——触发事件，用JS代码来进行跳转路由跳转的方法： this.$router.push()

路由传参方式也有两种：

1.查询参数传参——在路由中拼接查询参数形式：?key=value

传过去的参数，通过 this.$route.query.key 获取

2.动态路由传参——在路由中直接拼接参数形式：/value （前提：在router中配置动态路由 '…/:key' ）

传过去的参数，通过 this.$route.params.key 获取

编程式导航的跳转方式有两种：

① path 路径跳转

② name 命名路由跳转

传参方式 和 跳转方式 可以两两组合，实现携带参数的路由跳转

其中 $router.push() 方法的实参有两种写法：（$router.push() ——> 编程式导航 ）

1.简写：$router.push('路由路径')

①编程式导航-查询参数传参-path路径跳转

②编程式导航-动态路由传参-path路径跳转

2.完整写法（更适合传参，不用一个一个参数拼接）

其中，命名路由跳转只能使用完整写法：

①编程式导航-查询参数传参-path路径跳转

②编程式导航-动态路由传参-path路径跳转

③编程式导航-查询参数传参-name命名跳转

④编程式导航-动态路由传参-name命名跳转

根据查询

声明式导航也可以使用命名路由跳转方式

个人认为：

在元素（router-link）的属性写一个对象（JS代码）阅读性较差，故少用

综合案例：面经基础版

案例分析：

面经基础版-路由配置

一级路由

二级路由（还要准备第二级路由出口）

二级路由出口

高亮，a换成router-link，推荐使用模糊匹配类名，router-link-active

加上高亮样式

效果：

面经基础版-首页请求渲染

步骤：

请求数据：

然后在模板中渲染即可。

面经基础版-传参(查询参数&动态路由)

注册点击事件：

传参方式：

查询参数传参：

地址栏处会带上id：

动态路由传参（单个参数更优雅方便）：

配置动态路由

不用写上 id=

修复小bug

回到首页时：

出现空白（因为没有匹配到任何二级路由）

解决办法：重定向

给头部导航的返回小箭头添加返回功能（ $router.back() ）：

面经基础版-详情页渲染

发送请求获取数据：

插值语法渲染：

有时候出现空白：

有的内容没渲染出来

为什么？发请求需要时间，有一小段时间，article为空。

解决方法：加上v-if，有内容才去渲染

面经基础版-缓存组件

keep-alive

实操：

detail也被缓存了（不需要被缓存）

注意：name优先级更高

使用keep-alive的include属性

被缓存组件多两个生命周期钩子

实操：

进入时：

点击面经进入详情页面后，再返回，created mounted destroyed不会再被触发。

如果希望回到首页有提示等，在哪实现？

提供了actived deactived

小结：

自定义创建项目

1.安装脚手架 (已安装)

npm i @vue/cli -g

2.创建项目

vue create hm-exp-mobile

选项

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

手动选择功能

选择vue的版本

  3.x
> 2.x

是否使用history模式

选择css预处理

选择eslint的风格（eslint 代码规范的检验工具，检验代码是否符合规范）
比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子

选择校验的时机（直接回车）

选择配置文件的生成方式（直接回车）

是否保存预设，下次直接使用？ => 不保存，输入 N

等待安装，项目初始化完成

启动项目

cd 
npm run serve

ESLint手动修正代码规范错误

举例：

使用注意：

以 vue create 的文件夹（目录）作为根目录

运行报错：

根据规范说明找错：

理解错误：

ESLint自动修正代码规范错误

设置——>打开设置

卡皮巴拉

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
Vue2+Vue3基础入门到实战项目（五）——课程学习笔记

Vue2+Vue3基础入门到实战项目（五）——路由进阶：路由模块封装、router-link、声明式导航与编程式导航、传参方式：查询参数传参与动态路由传参、ESLint ……
复制链接

扫一扫