VUE基础（六）

于 2024-09-04 17:17:40 发布
阅读量304 收藏 6
点赞数 15
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hh_xi/article/details/141677747
版权

一、前端路由的概念与原理

路由：本质就是对应关系。SPA项目中，不同组件之间的切换需要通过前端路由完成

 路由分类

  • 前端路由：Hash地址与组件之间的对应关系
  • 后端路由：请求方式、请求地址与function处理函数之间的对应关系

 1、前端路由的工作方式

 前端路由工作步骤

  1. 用户点击页面上的路由链接
  2. 导致URL地址栏中的Hash值发生变化
  3. 前端路由监听到了Hash地址的变化
  4. 前端路由把当前Hash地址对应的组件渲染到浏览器中

 实现简易前端路由步骤(实际开发中使用vue-router)

  1. 导入并注册三个需要配置路由的组件
  2. 通过<component>标签的is属性，动态切换要显示的组件
  3. 在根组件中声明跳转路由的<a>链接,通过点击不同的a链接，切换浏览器地址栏中的Hash值
  4. 在created生命周期函数中监听浏览器地址栏中的Hash地址的变化（window.onhashchange），动态切换要展示的组件的名称

 示例

App.vue

<template>
  <div>
    <h1>App 根组件</h1>
    <!-- 放三个能切换路由的连接 ，hash地址随便起就行-->
    <a href="#/home">Home</a>&nbsp;
     <a href="#/movie">Movie</a>&nbsp;
      <a href="#/about">About</a>&nbsp;
    <hr />

    <component :is="comName"></component>
  </div>
</template>

<script>
// 导入三个组件
import MyHome from './MyHome.vue'
import MyMovie from './MyMovie.vue'
import MyAbout from './MyAbout.vue'

export default {
  name: 'MyApp',
  data() {
    return {
      comName: 'MyHome',
    }
  },
  created() {
    // 监听 hash 值变化的事件
    window.onhashchange = () => {
      // 通过 location.hash 获取到最新的 hash 值，并进行匹配
      switch (location.hash) {
        case '#/home':
          this.comName = 'MyHome'
          break
        case '#/movie':
          this.comName = 'MyMovie'
          break
        case '#/about':
          this.comName = 'MyAbout'
          break
      }
    }
  },
  // 注册组件
  components: {
    MyHome,
    MyMovie,
    MyAbout,
  },
}
</script>

二、vue-router的基本使用

vue-router是vue.js官方给出的路由的解决方案

 注

  • vue-router 3.x只能结合vue2进行使用，vue-router 4.x只能结合vue3进行使用

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

1、 vue-router 4.x的基本使用

使用步骤

  1. 在项目中安装 vue-router
  2. 定义路由组件
  3. 声明路由链接和占位符
  4. 创建路由模块
  5. 导入并挂载路由模块

 在项目中安装 vue-router

npm install vue-router@next -S

 定义路由组件

定义需要路由展示的组件，eg: Home.vue  About.vue

声明路由连接和占位符

使用<router-link> 标签来声明路由链接，使用<router-view>标签来声明路由占位符

<template>
  <div>
    <h1>vue-router 的基本使用</h1>
    <!-- 声明路由链接，hash地址要用to属性进行声明，且不再需要以#开头 -->
    <router-link to="/home">首页</router-link>&nbsp;
    <router-link to="/about">关于</router-link>
    <hr />

    <!-- 路由的占位符 -->
    <router-view>匹配到的组件在这个位置渲染</router-view>
  </div>
</template>

 创建路由模块

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

  1. 从vue-router中按需导入两个方法
  2. 导入需要使用路由控制的组件
  3. 创建路由实例对象
  4. 向外共享路由实例对象

 router.js

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

//导入需要使用路由控制的组件
import Home from './MyHome.vue'
import About from './MyAbout.vue'

// 创建路由对象
const router = createRouter({
  // 指定路由的工作模式为hash
  history: createWebHashHistory(),
  // 声明路由的匹配规则
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
  ],
})

// 导出路由对象
export default router

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

 main.js

import App from './components/App.vue'
import router from './components/router'


const app = createApp(App)

// 挂载路由模块
app.use(router)

app.mount('#app')

三、vue-router的高级用法

1、路由重定向

当用户在访问地址A的时候，强制用户跳转到地址C，从而展示特性的组件页面

 通过路由规则的redirect属性，指定一个新的路由地址

router.js中

 // 声明路由的匹配规则
  routes: [
    // path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/about', component: About },
  ],

 2、为激活的路由链接设置高亮的效果

被激活的路由链接，默认会应用一个叫做router-link-active的类名，可以使用此类名选择器，为激活的路由链接设置高亮样式

法一：直接修改router-link-active样式

index.css

.router-link-active {
  background-color: red;
  color: white;
  font-weight: bold;
}

法二：自定义路由高亮的class类

基于linkActiveClass属性，自定义路由链接被激活时的类名

router.js

const router = createRouter({
  // 指定路由的工作模式
  history: createWebHashHistory(),
  // 自定义路由高亮的 class 类
  linkActiveClass: 'active-router',
  // 声明路由的匹配规则
  routes: [
    // path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/about', component: About },
  ],
})

index.css中

.active-router {
  background-color: blue;
  color: white;
  font-weight: bold;
}

3、嵌套路由

嵌套路由：通过路由，实现组件的嵌套展示

步骤：

  1. 声明子路由链接和子路由占位符
  2. 在父路由规则中，通过children属性嵌套声明子路由规则

示例：以在About组件内部嵌套为例

About.vue

声明tab1和tab2的子路由链接以及子路由占位符

<template>
  <div>
    <h3>About 组件</h3>

    <!-- 声明子路由链接 -->
    <router-link to="/about/tab1">Tab1</router-link>&nbsp;
    <router-link to="/about/tab2">Tab2</router-link>
    <hr>

    <!-- 声明子路由占位符 -->
    <router-view></router-view>
  </div>
</template>

router.js

//上面导入 Tab1、Tab2；两个组件，这里省略了

// 声明路由的匹配规则
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    {
      path: '/about',
      component: About,
      // 通过 children 属性嵌套声明子级路由规则
      children: [
        // 子路由规则中的path不要以斜线开头
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 },
      ],
    },
  ],

嵌套路由中实现路由重定向

进入/about时，自动重定向至/about/tab1

 routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    {
      path: '/about',
      component: About,
      // 嵌套路由的重定向
      redirect: '/about/tab1',
      // 通过 children 属性嵌套声明子级路由规则
      children: [
        // 子路由规则中的path不要以斜线开头
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 },
      ],
    },
  ],

4、动态路由匹配

将hash中可变的部分定义为参数项，从而提高路由规则的复用性

在vue-router中使用英文: 来定义路由的参数项

 { path: '/movie/:id', component: Movie },

示例

App.vue中

<template>
  <div>
    <h1>vue-router 的基本使用</h1>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link>&nbsp;
    <router-link to="/movie/1">电影1</router-link>&nbsp;
    <router-link to="/movie/2">电影2</router-link>&nbsp;
    <router-link to="/movie/3">电影3</router-link>&nbsp;
    <hr />

    <!-- 路由的占位符 -->
    <router-view></router-view>
  </div>
</template>

router.js

// 声明路由的匹配规则
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    // 动态路由匹配
    // 路由中的动态参数以:声明，冒号后面是动态参数的名称
    { path: '/movie/:id', component: Movie},

  ],

获取动态路由中匹配的参数值

 法一：$route.params

可直接使用 $route.params对象访问到动态匹配的参数值

 $route.params.动态参数

 示例：Movie组件中

 <h3>Movie 组件 --- {{ $route.params.id }} </h3>

法二：使用props接收路由参数

在路由规则中可开启props传参

步骤：

  1. 在路由规则中声明props，值为true
  2. 在Movie组件中，使用props与动态参数接收路由规则匹配到的参数项

 示例：

router.js中

routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    // 动态路由匹配
    { path: '/movie/:mid', component: Movie, props: true },
  ],

Movie组件中

<template>
  <div>
    <h3>MyMovie 组件 --- {{ mid }}</h3>
  </div>
</template>

<script>
export default {
  name: 'MyMovie',
  //使用props与动态参数接收路由规则匹配到的参数项
  props: ['mid'],
}
</script>

5、编程式导航

通过调用API实现导航的方式，叫做编程式导航（location.herf）

通过点击链接实现导航的方式，叫做声明式导航（<a>链接、<router-link>）

 vue-router中提供的编程式导航API

 常用API

 this.$router.push('hash地址')

  • 跳转到指定的hash地址，从而显示对应的组件
<template>
  <div>
    <h3>MyHome 组件</h3>
    <button type="button" @click="goToMovie(3)">导航到Movie页面</button>
  </div>
</template>

<script>
export default {
  name: 'MyHome',
  methods: {
    goToMovie(id) {
      this.$router.push('/movie/' + id)
    },
  },
}
</script>

 this.$router.go(数值n)

  • 实现导航历史的前进，后退
<template>
  <div>
    <h3>MyMovie 组件</h3>
    <button type="button" @click="goBack">后退</button>
  </div>
</template>

<script>
export default {
  name: 'MyMovie',
  props: ['mid'],
  // 
  methods: {
    goBack() {
      // 后退到上一个组件页面
      this.$router.go(-1)
    },
  },
}
</script>

6、命名路由

通过name属性为路由规则定义名称的方式，叫做命名路由

 { path: '/home',
     component: Home ,
    //  使用name为当前路由定义名称
     name:'Hom'
 },

注：

  • 命名路由的name值不能重复，必须保证唯一性
  • 当hash地址特别长时，这种方法更方便

使用命名路由实现声明式导航

 为<router-link>标签动态绑定to属性，并通过name属性指定要跳转到的路由规则

可以用params属性指定跳转期间要携带的路由参数

 路由规则

 { name: 'mov', path: '/movie/:mid', component: Movie, props: true }

 跳转路由

<router-link :to="{ name: 'mov', params: { mid: 2 } }">go to movie</router-link>

使用命名路由实现编程导航

 调用push函数，期间指定一个配置对象，name是要跳转到的路由规则，params是携带的路由参数

 路由规则

 { name: 'mov', path: '/movie/:mid', component: Movie, props: true }

 跳转路由

<template>
  <div>
    <button type="button" @click="goToMovie(1)">go to movie</button>
  </div>
</template>

<script>
export default {
  name: 'MyHome',
  methods: {
    goToMovie(id) {
      this.$router.push({  name: 'mov',  params: { mid: id},})
    },
  },
}
</script>

7、导航守卫

 导航守卫可以控制路由的访问权限

声明全局导航守卫

全局导航守卫会拦截每个路由规则 ，从而对每个路由进行访问权限控制。

步骤：

  • 创建路由实例对象
  • 调用beforeEach方法声明全局导航守卫

fn方法为守卫方法，必须是一个函数，每次拦截到路由请求，都会调用fn进行处理

// 创建路由对象
const router = createRouter({
 
})

// 声明全局的导航守卫
router.beforeEach(() => {
  console.log('ok')
})

守卫方法的三个形参

to       目标路由对象

from   当前导航正要离开的路由对象

next    是一个函数，表示放行

router.beforeEach((to, from, next) => {
  console.log('ok')
  next()
})

注：

  • 在守卫方法中如果不声明next形参，则默认允许用户访问每一个路由
  • 在守卫方法中，如果声明了next形参，则必须调用next函数，否则不允许用户访问任何一个路由

 next函数的三种调用方式

  •  直接放行：next()
  • 强制停留在当前页面 next(false)
  • 强制跳转到指定页面next(hash地址)
// 全局路由导航守卫
router.beforeEach((to, from, next) => {

  if (to.path === '/main') {
    // 证明用户要访问后台主页
    next('/login')
  } else {
    // 访问的不是后台主页
    next()
  }
})

结合Token控制后台主页的访问权限

// 全局路由导航守卫
router.beforeEach((to, from, next) => {
const tokenStr = localStorage.getItem('token')//读取Token

  if (to.path === '/main' && !tokenStr) {//想要访问主页且Token不存在
  //  next(false) //不允许跳转
    next('/login')//强制跳转到登录页
  } else {
    // 访问的不是后台主页
    next()//放行
  }
})

hh_xi
关注
  • 15
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue基础六
HiYulinlin的博客
03-01 1270
动态组件、插槽、自定义命令
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue基础六：vue组件化编程基础，关键字：extend、components、template
白骨梦儿
12-01 997
vue组件化编程基础1. 组件一句话定义2. vue组件化编程：基本类型3. vue中组件从创建到使用3.1 如何定义一个组件？ 1. 组件一句话定义 组件的定义： 1.实现应用中局部功能代码和资源的集合 2. vue组件化编程：基本类型 1.非单文件组件 一个文件中包含多的组件，提供给其他文件调用 2.单文件组件（常用） 一个文件中仅包含一个组件 3. vue中组件从创建到使用 一、定义组件（创建组件） 二、注册组件 三、使用组件（写组件标签） 3.1 如何定义一个组件？
vue 基础知识总结
qq_40046544的博客
09-14 3316
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
Vue2基础
一+一加1的博客
07-05 856
分析vue中生命周期点我+1点我销毁vm
vue基础知识汇总
yuandawang的博客
01-06 5876
vue基础知识汇总
Vue3基础使用
一+一加1的博客
06-25 1150
点我加一
Vue3基础教程
wanglf_clog的博客
05-08 1216
全网最详细的Vue3新手入门教程。
VUE基础知识六
xiongIT的博客
04-07 328
自定义指令的方法和vue生命周期的总结
Vue.docx（vue基础知识）
04-20
**标题与描述**：“Vue.docx（vue基础知识）”这一文档主要介绍了Vue.js的基础知识，涵盖了目录结构、实例化方式以及基本用法等内容。 **知识点解读**： - **Vue.js**：一种渐进式的JavaScript框架，用于构建用户...
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
08-28
六、新建 Test/List.vue 页面 新建一个文件夹 Test，新建文件 List.vue，在 router 中配置： import List from '@/Test/List'; { path: '/List', name: 'List', component: List } 七、启动访问 启动访问，...
Vue-第3章 Vue 基础精讲
07-29
本章将深入讲解Vue的基础知识，帮助你快速掌握这个强大的框架。 一、安装与设置 在开始Vue的学习之前，你需要知道如何安装Vue。Vue可以通过CDN链接直接引入，也可以通过npm或yarn进行全局安装。对于开发环境，推荐...
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2444
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1686
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
在 Vue 中实现跨项目数据传递
最新发布
世轩的博客
09-03 913
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
vue3+ts封装一个uniapp的自动滚动列表，实现看板效果
qq_51384850的博客
08-31 921
自行配置滚动时间，滚动的高度默认为一行数据的高度，当数据更新的时候，会对新旧数据进行比较，在旧数据的基础上删除解除异常了的数据，将新增异常数据加到数据的最顶部，重新开始从顶部滚动，实现数据在电视机上的实时刷新和展示
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 462
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue基础web项目模板下载
09-26
Vue基础Web项目模板下载非常简单，可以按照以下步骤进行： 第一步，打开浏览器，访问Vue官方网站（https://cn.vuejs.org/）。 第二步，点击页面上方的“文档”按钮，进入Vue的文档页面。 第三步，在文档页面的左侧导航栏中，找到“起步 - 快速原型”这一部分。 第四步，在“起步 - 快速原型”部分中，你可以看到一个“下载vue-cli”按钮，点击它。 第五步，你将被带到Vue CLI的GitHub页面，这是Vue的一个脚手架工具，用于快速搭建Vue项目。 第六步，滚动页面，找到一个名为“vue-cli 3.x”的链接，点击它。 第七步，你将跳转到Vue CLI 3.x的npm页面，其中包含有关Vue CLI的详细信息和用法。 第八步，翻滚页面，你可以看到一个类似于“npm install -g @vue/cli”的命令，这是用于全局安装Vue CLI的命令。 第九步，打开终端，输入上述命令并执行，等待安装完成。 第十步，安装完成后，在终端中输入“vue create 项目名称”，其中“项目名称”是你想要创建的项目的名称。 第十一步，按照终端中的提示，选择需要的特性、配置和插件，然后等待项目创建完成。 第十二步，项目创建完成后，你就可以在本地磁盘中找到你的项目文件夹，里面包含了一个基础的Vue Web项目模板。 总结起来，下载Vue基础Web项目模板只需要通过Vue CLI工具进行项目的创建和初始化，然后你就可以在本地磁盘中找到你的项目文件夹了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值