Vue学习（四）

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量73 收藏
点赞数
文章标签： vue.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunny77777777/article/details/129300836
版权

Vue学习四

Vue Router路由管理器

相关理解

vue-router的理解

vue 的一个插件库，专门用来实现SPA 应用

对SPA应用的理解

  • 单页 Web 应用（single page web application，SPA）
  • 整个应用只有一个完整的页面
  • 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  • 数据需要通过ajax请求获取

路由的理解

  1. 什么是路由?
    1. 一个路由就是一组映射关系（key - value）
    2. key 为路径，value 可能是 function 或 component
  2. 路由分类
    1. 后端路由：
      1. 理解：value 是 function，用于处理客户端提交的请求
      2. 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
    2. 前端路由：
      1. 理解：value 是 component，用于展示页面内容
      2. 工作过程：当浏览器的路径改变时，对应的组件就会显示

基本路由

  • 安装vue-router，命令：npm i vue-router
  • 应用插件：Vue.use(VueRouter)
  • 编写router配置项：
  • 实现切换（active-class可配置高亮样式）
  • 指定展示位：<router-view></router-view>
    配置项：
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

高亮模式：

<router-link active-class="active" to="/about">About</router-link>

router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

import About from '../components/About'
import Home from '../components/Home'


//创建并暴露一个路由器
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        }
    ]
})

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
Vue.use(VueRouter)
//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    router
})

App.vue

<template>
	<div>
    	<div class="row">
    	  	<div class="col-xs-offset-2 col-xs-8">
    	    	<div class="page-header"><h2>Vue Router Demo</h2></div>
    	  	</div>
    	</div>
    	<div class="row">
    	  	<div class="col-xs-2 col-xs-offset-2">
    	    	<div class="list-group">
    	    		<!-- <a class="list-group-item active" href="./about.html">About</a>
    	    		<a class="list-group-item" href="./home.html">Home</a> -->
					<!-- Vue中借助router-link标签实现路由的切换 -->
					<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
					<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
    	    	</div>
    	  	</div>
    	  	<div class="col-xs-6">
    	    	<div class="panel">
    	    	  	<div class="panel-body">
						<!-- 指定组件的呈现位置 -->
    	    	    	<router-view></router-view>
    	    	  	</div>
    	    	</div>
    	  	</div>
    	</div>
  	</div>
</template>

<script>
	import Home from './components/Home'
	import About from './components/About'

	export default {
		name:'App',
		components:{Home,About}
	}
</script>

Home.vue

<template>
    <h2>我是Home组件的内容</h2>
</template>

<script>
    export default {
        name:'Home',
    }
</script>

About.vue

<template>
    <h2>我是About组件的内容</h2>
</template>

<script>
    export default {
        name:'About',
    }
</script>

几个注意事项

  • 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
  • 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
  • 每个组件都有自己的$route属性，里面存储着自己的路由信息
  • 整个应用只有一个router，可以通过组件的$router属性获取到

嵌套路由

  • 配置路由规则，使用children配置项：
routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message', //此处一定不要写：/message
				component:Message
			}
		]
	}
]
  • 跳转（要写完整路径）：<router-link to="/home/news">News</router-link>

路由的query参数

  • 传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{
	path:'/home/message/detail',
	query:{
		id:666,
        title:'你好'
	}
}">跳转</router-link>
  • 接收参数
$route.query.id
$route.query.title

命名路由

  • 作用：可以简化路由的跳转
  • 如何使用：
    1. 给路由命名：
{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                    name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}
  1. 简化跳转
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		    id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

路由的params参数

  • 配置路由，声明接收params参数：
{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}
  • 传递参数：
  • 路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>
  • 接收参数：
$route.params.id
$route.params.title

路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

路由跳转的replace方法

  • 作用：控制路由跳转时操作浏览器历史记录的模式
  • 浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push方式
  • 开启replace模式：<router-link replace ...>News</router-link>

编程式路由导航

  • 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
  • 具体编码
this.$router.push({
	name:'xiangqing',
    params:{
        id:xxx,
        title:xxx
    }
})

this.$router.replace({
	name:'xiangqing',
    params:{
        id:xxx,
        title:xxx
    }
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

banner.vue

<template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
        <button @click="back">后退</button>
		<button @click="forward">前进</button>
		<button @click="test">测试一下go</button>
    </div>
</template>

<script>
    export default {
        name:'Banner',
        methods:{
            back(){
                this.$router.back()
            },
            forward(){
                this.$router.forward()
            },
            test(){
                this.$router.go(3)
            }
        }
    }
</script>

message.vue

<button @click="showPush(m)">push查看</button>
<button @click="showReplace(m)">replace查看</button>
 
 methods:{
	showPush(m){
		this.$router.push({
        	name:'xiangqing',
            params:{
            	id:m.id,
                title:m.title
             }
		})
	},
	showReplace(m){
    	this.$router.replace({
        	name:'xiangqing',
            params:{
            	id:m.id,
                title:m.title
            }
         })
	}

缓存路由组件

  • 作用：让不展示的路由组件保持挂载，不被销毁
  • 具体编码
//缓存一个路由组件
<keep-alive include="News"> //include中写想要缓存的组件名，不写表示全部缓存
    <router-view></router-view>
</keep-alive>

//缓存多个路由组件
<keep-alive :include="['News','Message']"> 
    <router-view></router-view>
</keep-alive>

activated和deactivated

  • activated和deactivated是路由组件所独有的两个钩子，用于捕获路由组件的激活状态
  • 具体使用：
    1. activated路由组件被激活时触发
    2. deactivated路由组件失活时触发
      New.vue
<template>
    <ul>
        <li :style="{opacity}">Hello!</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>

<script>
    export default {
        name:'News',
        data(){
            return{
                opacity:1
            }
        },
        activated(){
            console.log('news组件被激活了')
            this.timer = setInterval(() => {
                console.log('@')
                this.opacity -= 0.01
                if(this.opacity<=0) this.opacity=1
            }, 16);
        },
        deactivated(){
            console.log('news组件失活了')
            clearInterval(this.timer)
        }
    }
</script>

路由守卫

对路由进行权限控制

全局路由守卫

router/index.js修改
给组件添加meta属性的内容meta:{isAush:true,title:'详情'}

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from) => {
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享守卫

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
    if(localStorage.getItem('school') === 'atguigu'){
        next()
    }else{
        alert('暂无权限查看')
    }
}

组件内守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {...},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {...},

路由器的两种工作模式

  • 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值
  • hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器
  • hash模式：
    1. 地址中永远带着#号，不美观
    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
    3. 兼容性较好
  • history模式：mode:'history'
    1. 地址干净，美观
    2. 兼容性和hash模式相比略差
    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

Vue UI组件库

常用UI组件库

element-ui基本使用

element-ui

  1. 安装 element-ui：npm i element-ui -S
  2. src/main.js:
import Vue from 'vue'
import App from './App.vue'
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
//使用ElementUI
Vue.use(ElementUI)

new Vue({
    el:"#app",
    render: h => h(App),
})
  1. src/App.vue:
<template>
	<div>
		<br>
		<el-row>
			<el-button icon="el-icon-search" circle></el-button>
			<el-button type="primary" icon="el-icon-edit" circle></el-button>
			<el-button type="success" icon="el-icon-check" circle></el-button>
			<el-button type="info" icon="el-icon-message" circle></el-button>
			<el-button type="warning" icon="el-icon-star-off" circle></el-button>
			<el-button type="danger" icon="el-icon-delete" circle></el-button>
		</el-row>
	</div>
</template>

<script>
	export default {
		name:'App',
	}
</script>

element-ui按需引入

  1. 安装 babel-plugin-component：npm install babel-plugin-component -D
  2. 修改 babel-config-js:
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
  1. src/main.js:
import Vue from 'vue'
import App from './App.vue'
//按需引入
import { Button,Row } from 'element-ui'


Vue.config.productionTip = false

Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Row)
 */

new Vue({
    el:"#app",
    render: h => h(App),
})
孙小吉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue学习心得
weixin_49331914的博客
07-08 4314
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点; mvvm ●Model:模型层，在这里表示JavaScript对象 ●View:视图层,在这里表示DOM (HTML操作的元素) ●ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者 在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通
Vue学习-Vue入门
weixin_59357453的博客
04-02 4233
这是一篇vue学习记录
vue 学习
freeking101的博客
07-17 8242
​Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。................................................
VUE学习四事件处理
lamwolf的博客
07-09 1万+
/ console.log(this) //此处的this是vm。// console.log(this) //此处的this是vm。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。//定义了一个别名按键。
vue学习
doyoudooo的博客
05-05 4126
VUE 文章目录VUE@[toc]1、前端核心分析2、前端知识体系2.1 HTML(结构层)2.2 CSS（表现层）2.3JavaScript（行为层）**Typescript 微软的标准**javascrip框架UI框架javascript构建工具2.4三端统一混合开发（Hybrid App）微信小程序2.5后端技术2.6主流前端框架混合开发3、了解前后端分离的演变史3.1、后端为主的MVC时代3.2、基于AJAX带来的SPA时代3.3、前端为主的MVC时代3.4、Node JS带来的全栈时代3.5、总
Vue学习四：webpack打包（指定环境接口访问Ip）
Cx的博客
04-21 1559
webpack打包指定环境ip，区分生产环境、测试环境和开发环境的配置
黑马vue学习路线
weixin_49555741的博客
05-19 1689
vue 学习路线 第一天：前端工程化与webpack 前端工程化的相关概念 wabpack 的常见用法 打包发布 第二天：vue基础入门-part1 vue基本使用步骤 vue 中常用的指令 vue-devtools 调试工具 目标:完成vue 指令完成页面结构渲染，使用vue调试工具辅助vue开发 第三天：vue基础入门-part2 过滤器和侦听器 计算属性的用法 axios的基本用法 vue-cil 的安装和使用 目标：在实际开发中运用过滤器、侦听器、计算属性解决问题。用axi
VUE学习笔记
weixin_51660483的博客
05-30 1552
什么是VUE？vue是一个用于构建用户界面的渐进式框架vue是一个基于数据渲染出用户能够看到的页面渐进式框架。
Vue项目入门学习
{竹子}
04-17 1556
一、环境 环境已经搭好，所以就不废话了，看一下我的版本 这已经是最新环境了。 二、创建项目 我们使用命令vue create创建，如下： vue create v1 提示说：请选择一个预设，预设就是项目的一些初始化，就是给你安装规定一些基本的东西，以前的低版本vue创建项目是用vue init webpack 【projectName] 命令，现在我们有了vue create，不再使用vue init了。 这里我们选择默认（Default（[Vue 3]）babel, eslint）。 复杂的创建项目
Vue学习之从入门到神经(两万字收藏篇)
热门推荐
白大锅的博客，毕设WangLoveBai_999
07-20 36万+
Vue史诗级教程系列文章，欢迎订阅专栏
Vue学习手册
02-26
这份"Vue学习手册"旨在引导你逐步掌握Vue的核心概念和实践技巧。 一、Vue基础知识 Vue的基础架构围绕着一个核心对象Vue实例，它是一个数据绑定和事件处理的容器。通过声明式的模板语法，你可以轻松地将数据绑定到...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1271
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 192
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
vue2 中如何使用 vuedraggable 库实现拖拽功能
微光无限的博客
07-02 248
vue2 中如何使用 vuedraggable 库实现拖拽功能（详细Demo，容易理解）
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 993
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
小满zs学习vue3第四
08-12
很高兴回答您关于学习Vue 3的问题。Vue 3是一种流行的JavaScript框架，用于构建用户界面。它具有许多令人兴奋的新特性和改进，可以让您更轻松地开发可维护和可扩展的应用程序。 如果您已经掌握了Vue 2，那么学习Vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值