Vue2基础九、路由

这篇具有很好参考价值的文章主要介绍了Vue2基础九、路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

零、文章目录

Vue2基础九、路由

1、单页应用

(1)单页应用是什么
  • 单页面应用(SPA:Single Page Application): 所有功能在 一个html页面 上实现
  • 具体示例: 网易云音乐 https://music.163.com/
(2)单页面应用VS多页面应用

Vue2基础九、路由,大前端,vue.js,前端,javascript

  • 单页面应用优缺点

    • 优点:按需更新性能高,开发效率高,用户体验好

    • 缺点:学习成本,首屏加载慢,不利于SEO

(3)单页面应用应用场景
  • 单页面应用应用场景:系统类网站 / 内部网站 / 文档类网站 /移动端站点
  • 多页面应用应用场景:公司官网 / 电商类网站
(4)单页应用优势原理
  • 单页面应用程序,之所以开发效率高,性能高,用户体验好,最大的原因就是:页面按需更新
  • 要按需更新,首先就需要明确:访问路径组件的对应关系!访问路径 和 组件的对应关系如何确定呢? 路由

2、路由概念

(1)路由是什么
  • 路由是一种映射关系
(2)Vue中路由
  • Vue中路由:路径组件 的 映射 关系

Vue2基础九、路由,大前端,vue.js,前端,javascript

3、基本使用

(1)简介
  • 目标:认识插件 VueRouter,掌握 VueRouter 的基本使用步骤
  • 作用:修改地址栏路径时,切换显示匹配的组件
  • 说明:Vue 官方的一个路由插件,是一个第三方包
  • 官网:https://v3.router.vuejs.org/zh/
(2)使用步骤

5个基础步骤 (固定)

  • ① 下载: 下载 VueRouter 模块到当前工程,版本3.6.5
yarn add vue-router@3.6.5
  • ② 引入
import VueRouter from 'vue-router' 
  • ③ 安装注册
Vue.use(VueRouter)
  • ④ 创建路由对象
const router = new VueRouter()
  • ⑤ 注入,将路由对象注入到new Vue实例中,建立关联
new Vue({
render: h => h(App),
router
}).$mount('#app')

2 个核心步骤

  • ① 创建需要的组件 (views目录),配置路由规则(路径组件的匹配关系 )

Vue2基础九、路由,大前端,vue.js,前端,javascript

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

Vue2基础九、路由,大前端,vue.js,前端,javascript

(3)代码实现
  • 父组件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>
  • 子组件Find.vue
<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

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

<style>

</style>
  • 子组件Friend.vue
<template>
  <div>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
  </div>
</template>

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

<style>

</style>
  • 子组件My.vue
<template>
  <div>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
  </div>
</template>

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

<style>

</style>
  • 入口main.js中注册路由
import Vue from 'vue'
import App from './App.vue'

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中,建立关联

// 2个核心步骤
// 1. 建组件(views目录),配规则
// 2. 准备导航链接,配置路由出口(匹配的组件展示的位置) 
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
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 },
  ]
})

Vue.config.productionTip = false

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

4、组件分类

(1)组件分类
  • 页面组件&复用组件

  • 都是 .vue文件 (本质无区别)

Vue2基础九、路由,大前端,vue.js,前端,javascript

(2)分类原因

分类开来 更易维护

  • src/views文件夹
    • 页面组件 - 页面展示 - 配合路由用
  • src/components文件夹
    • 复用组件 - 展示数据 - 常用于复用
(3)案例
  • 页面组件

Vue2基础九、路由,大前端,vue.js,前端,javascript

  • 复用组件

Vue2基础九、路由,大前端,vue.js,前端,javascript

5、路由模块封装

(1)路由封装好处
  • 问题:所有的路由配置都堆在main.js中合适么?
  • 目标:将路由模块抽离出来。
  • 好处:拆分模块,利于维护
(2)如何快速引入组件
  • @指代src目录,可以用于快速引入组件
(3)代码实现
  • 将路由部分放到router/index.js,main.js再引入这个文件,其他不变

Vue2基础九、路由,大前端,vue.js,前端,javascript

  • 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 },
  ]
})

export default router
  • main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

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

6、声明式导航

(1)导航高亮
  • 需求:实现导航高亮效果

Vue2基础九、路由,大前端,vue.js,前端,javascript

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

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

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

Vue2基础九、路由,大前端,vue.js,前端,javascript

(2)精确匹配&模糊匹配
  • 我们发现 router-link 自动给当前导航添加了 两个高亮类名
  • ① router-link-active 模糊匹配 (用的多)
    • to=“/my” 可以匹配 /my /my/a /my/b …
  • ② router-link-exact-active 精确匹配
    • to=“/my” 仅可以匹配 /my

Vue2基础九、路由,大前端,vue.js,前端,javascript

(3)自定义高亮类名
  • router-link 的 两个高亮类名太长了,我们希望能定制怎么办?

Vue2基础九、路由,大前端,vue.js,前端,javascript

  • 可以在router/index.js文件中配置自定义样式类名
    • linkActiveClass 模糊匹配 类名自定义
    • linkExactActiveClass 精确匹配 类名自定义
const router = new VueRouter({
	routes: [...],
	linkActiveClass: "类名1",
	linkExactActiveClass: "类名2"
})

Vue2基础九、路由,大前端,vue.js,前端,javascript

(4)导航链接传参
  • 在跳转路由时, 进行传值,有两种方式

    • 查询参数传参

    • 动态路由传参

  • 查询参数传参

    • ① 语法:to=“/path?参数名=值
    • ② 对应页面组件接收传递过来的值:$route.query.参数名
  • 动态路由传参

    • ① 配置动态路由

    Vue2基础九、路由,大前端,vue.js,前端,javascript

    • ② 配置导航链接:to=“/path/参数值
    • ③ 对应页面组件接收传递过来的值:$route.params.参数名
  • 两种传参方式的区别

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

      • ① 跳转:to=“/path?参数名=值&参数名2=值”

      • ② 获取:$route.query.参数名

    • 动态路由传参 (优雅简洁,传单个参数比较方便)

      • ① 配置动态路由:path: “/path/参数名”
      • ② 跳转:to=“/path/参数值
      • ③ 获取:$route.params.参数名
(5)查询参数传参–代码演示

Vue2基础九、路由,大前端,vue.js,前端,javascript

  • 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?key=后端培训">后端培训</router-link>
      <router-link to="/search?key=前端培训">前端培训</router-link>
      <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

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

<style>
.logo-box {
  height: 250px;
  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>
(6)动态路由传参–代码演示

Vue2基础九、路由,大前端,vue.js,前端,javascript

  • router/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 },
    { 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: 250px;
  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.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.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>
(7)动态路由参数可选符
  • **问题:**配了路由 path: "/search/:words" 为什么按下面步骤操作,会匹配不到组件,显示空白?
  • 原因: /search/:words 表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符 "?"

Vue2基础九、路由,大前端,vue.js,前端,javascript

  • router/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 },
    { 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: 250px;
  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.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.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>
  • 效果:传进去的值是空

Vue2基础九、路由,大前端,vue.js,前端,javascript

7、路由重定向

(1)路由重定向
  • **问题:**网页打开, url 默认是 / 路径,未匹配到组件时,会出现空白
  • **说明:**重定向 → 匹配path后, 强制跳转path路径
  • 语法: { path: 匹配路径, redirect: 重定向到的路径 }

Vue2基础九、路由,大前端,vue.js,前端,javascript

(2)路由404
  • **作用:**当路径找不到匹配时,给个提示页面
  • **位置:**配在路由最后
  • **语法:**path: “*” (任意路径) – 前面不匹配就命中最后这个

Vue2基础九、路由,大前端,vue.js,前端,javascript

Vue2基础九、路由,大前端,vue.js,前端,javascript

(3)路由模式
  • 问题: 路由的路径看起来不自然, 有#,能否切成真正路径形式?
    • hash路由(默认) 例如: http://localhost:8080/#/home
    • history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)

Vue2基础九、路由,大前端,vue.js,前端,javascript

8、编程式导航

(1)基本跳转
  • 点击按钮跳转如何实现?用JS代码来进行跳转,两种语法:

    • ① path 路径跳转 (简易方便)

    Vue2基础九、路由,大前端,vue.js,前端,javascript

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

Vue2基础九、路由,大前端,vue.js,前端,javascript

  • 代码实现: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: 250px;
  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>
(2)路由传参
  • 两种传参方式:查询参数+动态路由传参,两种跳转方式,对于两种传参方式都支持

  • path 路径跳转

    • ① query传参

    Vue2基础九、路由,大前端,vue.js,前端,javascript

    • ② 动态路由传参 (需要配动态路由)

    Vue2基础九、路由,大前端,vue.js,前端,javascript

  • name 命名路由跳转

    • ① query传参

    Vue2基础九、路由,大前端,vue.js,前端,javascript

    • ② 动态路由传参 (需要配动态路由)

    Vue2基础九、路由,大前端,vue.js,前端,javascript

  • 代码实现文章来源地址https://www.toymoban.com/news/detail-617511.html

    • 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>
    
    <style>
    .logo-box {
      height: 250px;
      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.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.参数名 获取查询参数
        // this.$route.params.参数名 获取动态路由参数
        // console.log(this.$route.params.words);
      }
    }
    
    </script>
    
    <style>
    .search {
      width: 400px;
      height: 240px;
      padding: 0 20px;
      margin: 0 auto;
      border: 2px solid #c4c7ce;
      border-radius: 5px;
    }
    </style>
    

到了这里,关于Vue2基础九、路由的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(51)
  • vue(32) : win10创建vue2基础前端框架

    vue2 element-ui axios 含接口调用示例 开发工具为HBuilderX 3.7.3 等待创建项目 代理后端配置如下, 三个test改成相同的uri前缀即可, uri该签注会代理到后端 proxy: {       // 代理test开头的uri       \\\'/test\\\': {         target: \\\'http://192.168.1.1:8080\\\', // 后端地址         changeOrigin: true, // 开启代

    2024年02月06日
    浏览(39)
  • vue2+antd——实现动态菜单路由功能——基础积累

    最近在写后台管理系统,遇到一个需求就是要将之前的静态路由改为动态路由,使用的后台框架是: vue-antd-admin 然后通过 loadRoutes 方法来实现异步动态路由。 如上图所示,需要在登录接口调用成功后,书写以下的代码: import { loadRoutes } from \\\'@/utils/routerUtil.js\\\'; import { getCodeL

    2024年02月08日
    浏览(40)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(62)
  • 【前端】在Vue2中使用Vanta.js炫酷动态背景(全屏背景)

    官网:https://www.vantajs.com/ 由于博主在参考官网及官方GitHub进行应用时遇到一些问题,因此写了该篇博客,以避免大家因找Bug而浪费时间,方便快速的应用。 注意版本 Vue的版本如下 “vue”: “^2.6.14” 渲染容器 导包 方法 完整代码: 完整代码: 参加颜色参数 如果报错:‘X

    2024年02月11日
    浏览(48)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(58)
  • 【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面,路由式开发(附完整代码)

    目录 效果图: 一、template部分 二、style样式 三、script部分 1.先对手机号的格式进行一个判断 2.接下来就是表单验证规则rules 3.最后就是methods了 (1)首先我们给获取验证码绑定一个方法 (2)然后封装一个axios接口,方便后面测试联调(这部分每个人封装的都不一样) (3)然

    2024年02月17日
    浏览(50)
  • Vue前端 更具router.js 中的meta的roles实现路由卫士,实现权限判断。

    参考了之篇文章 1、我在登陆时获取到登录用户的角色名roles,并存入sessionStorage中,具体是在login页面实现,还是在menu页面实现都可以。在menu页面实现,可以显得登陆快一些。 2、编写router.js,注意,一个用户可能有多个角色。 这里有个bug 我们的roles存在sessionStorage中,关闭

    2024年02月13日
    浏览(44)
  • 【前端vue面试】vue2

    computed 有缓存,基于响应式依赖数据(基于data中声明过或者父组件传递的props中的数据)发生改变,才会重新进行计算 数据变,直接会触发相应的操作 watch监听引用类型,需要添加deep:true深度监听,拿不到oldVal(旧值),因为新值和老值指针相同。 v-show 和v-if 都是做条件隐

    2024年02月08日
    浏览(38)
  • Vue2动态路由

    应用场景:   一般管理端的菜单栏是根据登录用户角色不同,动态生成的,在vue中我们不止菜单栏需要动态生成,同时我们路由也需要动态生成。 使用到的组件: 组件名称 组件版本 组件作用 axios 1.3.4 用于发送请求获取数据 element-ui 2.15.13 前端ui组件库,制作页面使用 vue-

    2024年02月20日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包