Vue初识
什么是Vue
小结
- Vue是一个渐进式的JavaScript框架
- Vue核心关注视图层
- Vue是一个MVVM模式的前端框架
渐进式
- 笔者理解的“渐进式框架”也非常简单，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。
- 场景一：公司刚开始一个项目，技术人员对Vue的掌握也不足够。那么我们就不能使用VUE了么？当然不是，如果你只是使用VUE做些基础操作，如：页面渲染、表单处理提交功能，那还是非常简单的，成熟技术人员上手也就一两天。完全可以用它去代替jquery。并不需要你去引入其他复杂特性功能。
- 场景二：我们的项目规模逐渐的变大了，我们可能会逐渐用到前端路由、状态集中管理、并最终实现一个高度工程化的前端项目。这些功能特性我们可以逐步引入，当然不用也可以。
MVVM
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。
- View层是视图层，也就是用户界面。前端主要由HTML和CSS来构建；
- Model层 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端的提供的API接口；
- ViewModel层是视图数据层，一个同步View和Model的对象。也就是之后Vue对象进行操作的地方
- 在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
第一个Vue程序
首先使用JavaScript技术都需要导入JavaScript的js文件
所以使用Vue也是同样要导入Vue的文件
导入方式可以是
- 直接导入文件
- 使用连接路径的形式
- 可以使用Vue-cli脚手架直接进行创建Vue的项目工程类似于后端的Maven技术
Vue.js分类
- 开发版本：包含完整的警告和调试模式
- 生产版本：删除了警告，体积更小
Vue对象
引入Vue.js文件之后可以在
<!DOCTYPE html>
<html lang="en">
<!--在HTML中引入Vue.js文件-->
<!--因为都是JavaScript所以操作类似-->
<script type="text/javascript" src="js/vue.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--创建一个标签,使用id进行标识-->
<!--下面可以使用Vue对象进行指定-->
<div id="app">
{{msg}}
</div>
</body>
</html>
<script type="text/javascript">
// 创建Vue对象
const vue = new Vue({
el: "#app",
data: {"msg":"HelloWord"}
})
</script>
发现我们在
这里使用了const，当然我们还可以使用var，let创建，说一说创建对象的区别
var，let，const创建对象区别
在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过 function 关键字，而在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class
具体可以自行了解一下
Vue对象
看到上面创建了Vue对象，还是用了Vue对象中的一些属性，下面介绍属性
el
用来指定Vue对象操作的对应HTML标签。
指定之后，Vue的操作指定在该范围中使用
<!--创建一个标签,使用id进行标识-->
<!--下面可以使用Vue对象进行指定-->
<div id="app">
{{msg}}
</div>
{{msg}}
$mount
-
作用和el一致，都是配置控制的元素，使用哪个都可以，二选一
<div id="app"></div> 1const vm = new Vue({}) vm.$mount('#app');
data
存放要用到的数据，数据为响应式的
前面说过MVVM,这里我们可以发现在data中的数据可以通过 {{}} 插值表达式 显示在页面上，vm，指的就是Vue对象的操作
我们可以通过 {{}} 插值表达式 进行将data中存放的数据展示出来
{{}}插值表达式
除了填写data之外，还可以直接填写数据值（数字、字符串、布尔值、undefined、null、数组、对象）
<!--创建一个标签,使用id进行标识-->
<!--下面可以使用Vue对象进行指定-->
<div id="app">
{{msg}}
<!-- 运算表达式 -->
{{ 'you' + 'me' }}
{{ 10 - 5 }}
{{ 100 * 7 }}
{{ 1000 / 12 }}
<!-- 逻辑表达式 -->
{{ liu || li }}
{{ deng && liu }}
{{ !wang }}
<!-- 三元表达式 -->
{{ 1 + 1 === 3 ? '邓旭明' : '正常人' }}
<!-- 函数调用也是表达式，也可以使用,这个以后再学哈... -->
</div>
{{msg}}
computed
计算属性,与methods类似都是放置方法执行，但是不同的是
methods每次都会进行调用，从而得到返回值
computed，如果没有改变值的情况下，内部的不会进行调用，直接返回原来的返回值，减少消耗
methods
将我们编写的函数写在这里，可以进行调用
<!DOCTYPE html>
<html lang="en">
<!--在HTML中引入Vue.js文件-->
<!--因为都是JavaScript所以操作类似-->
<script type="text/javascript" src="js/vue.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--创建一个标签,使用id进行标识-->
<!--下面可以使用Vue对象进行指定-->
<div id="app">
<button v-on:click="bkone()">点我</button>
</div>
</body>
</html>
<script type="text/javascript">
// 创建Vue对象
const vue = new Vue({
el: "#app",
data: {"msg":"HelloWord"},
// 该属性将写方法，可以进行调用
methods:{
bkone(){
alert("bkone");
}
}
})
</script>
这里发现我们绑定方法使用Vue的指令，现在进行Vue的指令学习
Vue相关指令
- 具有特殊含义、拥有特殊功能的特性
- 指令带有v-前缀，表示它们是Vue提供的特殊特性
- 指令可以直接使用data中的数据
v-text
更新元素的 textContent
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-text替换元素中所有的文本，Mustache只替换自己，不清空元素内容
<!-- 渲染为：<span>杉杉最美</span> -->
<span v-text="msg">----</span>
<!-- 渲染为：<span>----杉杉最美----</span> -->
<span>----{{msg}}----</span>
条件渲染相关指令
v-if
和java中if判断一样，如果条件为真，显示指定标签，为假不显示
<div id="app">
<span v-if="true" >BkTwo 1</span>
<span v-if="false" >BkTwo 2</span>
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
}
})
</script>
v-else
- 为 v-if 或者 v-else-if 添加“else 块”。
- 注意：前一兄弟元素必须有 v-if 或 v-else-if
<div id="app">
<span v-if="true" >BkTwo 1</span>
<span v-else>BkTwo 1-1</span>
<span v-if="false" >BkTwo 2</span>
<span v-else>BkTwo 2-2</span>
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
}
})
</script>
v-else-if
- 表示 v-if 的 “else if 块”。可以链式调用。
- 注意：前一兄弟元素必须有 v-if 或 v-else-if
v-show
-
根据表达式之真假值，切换元素的 display CSS 属性。
-
与v-if一样都可以隐藏指定的元素
<h1 v-show="true">Hello!</h1>
v-if VS v-show
v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。v-show则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
v-if 有更高的切换开销，v-show 有更高的初始渲染开销，如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好
v-show不支持元素
v-show不支持v-else/v-else-if
v-bind 指令
- 动态地绑定一个或多个属性
- : 简写方式
<div id="app">
<input v-bind:type="inputBk" value="点我1" >
<input :type="inputBk" value="点我2" >
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
"inputBk":"button"
}
})
</script>
v-on
- 动态绑定事件
- @ 简写
<div id="app">
<button v-on:click="show(1)" >点我1</button>
<button @click="show(2)">点我2</button>
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {},
methods:{
show(msg){
alert(msg)
}
}
})
</script>
v-for
类似java中的forEach循环
<div id="app">
<ul>
<li v-for="(item,index) in array" >{{item}}</li>
</ul>
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
"array":["123","234","345"]
}
})
</script>
v-model指令
可以在表单元素上创建双向数据绑定。即数据更新元素更新、元素更新数据也会更新。
<div id="app">
<input v-model="msg" >{{msg}}
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
msg:""
}
})
</script>
双向数据绑定，两边任何数据改变，两边都会产生影响
组件开发
在上面我们了解了Vue的基本使用，下面一起来学习Vue的组件开发
组件是什么？
组件是可复用的Vue实例
将一部分内容设置为组件，类似于自定义标签，在需要的地方引入即可
小示例
这个示例演示的是局部组件
<!--创建Vue对象绑定的区域-->
<div id="app">
<one></one>
</div>
<!--设定的组件指定内容-->
<template id="oneTemp">
<div>
{{msg}}
</div>
</template>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {},
// componets指定组件的标签，组件的内容,数据
components: {
"one": {
template: "#oneTemp",
data: function () {
return {
'msg': "我是OneTemp"
}
}
}
}
})
</script>
通过上面示例发现，我们将一部分内容放在标签中
在使用Vue对象进行指定组件，设定名字，可以通过自定义标签进行指定
组件中还可以设置数据，等信息。组件可以重复利用
注意
-
标签下存在
标签 -
组件中指定的data的格式是方法的返回值
组件开发分为
局部组件
上面示例中展示的是局部组件
全局组件
<!--创建Vue对象绑定的区域-->
<div id="app">
<one></one>
<two></two>
</div>
<!--设定的组件指定内容-->
<template id="oneTemp">
<div>
{{msg}}
</div>
</template>
<template id="twoTemp">
<div>
{{msg}}
</div>
</template>
<script type="text/javascript">
// 通过Vue.component设置全局组件
// 全局组件可以在所有的Vue对象中使用
Vue.component("two",{
template: "#twoTemp",
data:function () {
return {
msg:"我是全局组件"
}
}
})
// 局部组件只能出现在创建该组件的Vue对象中
const vue = new Vue({
el: "#app",
data: {},
// componets指定组件的标签，组件的内容,数据
components: {
"one": {
template: "#oneTemp",
data: function () {
return {
'msg': "我是OneTemp"
}
}
}
}
})
</script>
全局组件和局部组件的区别
<!--创建Vue对象绑定的区域-->
<div id="app">
这里是app组件
<one></one>
<two></two>
</div>
<hr/>
<!--再次创建Vue对象 将全局组件和局部组件都放入 -->
<!--看一看显示-->
<div id="abb">
这里是abb组件
<one></one>
<two></two>
</div>
<!--设定的组件指定内容-->
<template id="oneTemp">
<div>
{{msg}}
</div>
</template>
<template id="twoTemp">
<div>
{{msg}}
</div>
</template>
<script type="text/javascript">
// 通过Vue.component设置全局组件
// 全局组件可以在所有的Vue对象中使用
Vue.component("two",{
template: "#twoTemp",
data:function () {
return {
msg:"我是全局组件"
}
}
})
// 局部组件只能出现在创建该组件的Vue对象中
const vue = new Vue({
el: "#app",
data: {},
// componets指定组件的标签，组件的内容,数据
components: {
"one": {
template: "#oneTemp",
data: function () {
return {
'msg': "我是OneTemp"
}
}
}
}
})
const vm = new Vue({
el:"#abb"
});
</script>
注意
- 全局组件可以出现在其他的Vue中去使用
- 局部组件只能出现在创建自己的Vue中使用
- 组件只能在Vue中使用，其他地方不会显示
父子组件
<!--绑定父组件-->
<template id="one">
<div>
<span>这里是父组件</span>
<child></child>
</div>
</template>
<!--绑定子组件-->
<template id="child">
<div>
<span>这里是子组件</span>
<button @click="fn1">子组件</button>
</div>
</template>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {},
components: {
"one": {
template: "#one",
components: {
"child": {
template: "#child",
methods: {
fn1() {
alert("我是子组件");
}
}
}
}
}
}
})
</script>
发现上面再组件中还可以创建出组件，这个组件指定再，创建该组件的范围中才可以使用
发现组件中也可以定制方法使用
父子组件传值
父传子
<!--这里是Vue对象示例-->
<div id="app">
<parent></parent>
</div>
<!--这里是父组件，引入子组件并传入值-->
<template id="parent">
<div>
<span>父组件</span>
<child cv='父传子'></child>
</div>
</template>
<!--这里是子组件，展示子组件中的data数据-->
<template id="child">
<div>
<span>子组件</span>
<span>{{cv}}</span>
</div>
</template>
<!--父组件传值给子组件-->
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {},
components:{
"parent":{
template:"#parent",
components: {
"child":{
template: "#child",
data: function () {
return {
cv:"ss"
}
},
props:["cv"]
}
}
}
}
})
</script>
子传父
<!--子传父示例-->
<div id="app">
<ba></ba>
</div>
<template id="parent">
<div>
<h3>父组件接收的值{{parentmsg}}</h3>
<zi @change="get" ></zi>
</div>
</template>
<template id="child">
<div>
<input type="button" value="点击传值" @click="fn1">
<h4>准备传递的值{{childmsg}}</h4>
</div>
</template>
</body>
</html>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {},
components:{
"ba":{
template:"#parent",
data:function () {
return {
parentmsg:""
}
},
components: {
"zi":{
template: "#child",
data: function () {
return {
childmsg:"100"
}
},
methods:{
fn1(){
this.$emit("change",this.childmsg)
}
}
}
},
methods: {
get(val){
this.parentmsg=val;
}
}
}
}
})
</script>
axion
- 在浏览器中创建 XMLHttpRequests
- 在 node.js 则创建 http 请求
- 支持 Promise API
- 支持拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
可以发布异步请求，将请求的结果得到，从而进行操作
示例
通过SpringBootHttp请求
使用axios进行发送异步请求，从得到结果进行操作
@RequestMapping(value = "/axiosTest")
@ResponseBody
@CrossOrigin
public List<GoodsSort> Axios(){
// 从数据库中获取信息
List<GoodsSort> goodsSorts = goodsSortService.selectAll();
return goodsSorts;
}
<div id="app">
<button @click="axiosTest()" >点我异步请求</button>
</div>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {},
methods:{
axiosTest(){
axios.get("http://localhost:8080/axiosTest",{
// 这个属性指定请求带入的参数
params:{}
// then()成功之后的返回值
}).then(res=>{
console.log(res.data)
// catch()出现异常返回error错误
}).catch(err=>{
})
}
}
})
</script>
再发送异步请求可能会出现异常
@CrossOrigin 可以解决跨域问题
@CrossOrgin
出于安全原因，浏览器禁止Ajax调用驻留在当前原点之外的资源。例如，当你在一个标签中检查你的银行账户时，你可以在另一个选项卡上拥有EVILL网站。来自EVILL的脚本不能够对你的银行API做出Ajax请求（从你的帐户中取出钱！）使用您的凭据。
跨源资源共享（CORS）是由大多数浏览器实现的W3C规范，允许您灵活地指定什么样的跨域请求被授权，而不是使用一些不太安全和不太强大的策略，如IFRAME或JSONP。
插槽
插槽需要定义在组件中使用
在组件中放入一个插槽，在使用的Vue实例中不指定插槽，将展示默认情况，就是组件中插槽怎么写就是怎么样的
在调用组件时候，重新指定插槽内容，展示时候将展示重新指定后的内容
<!--在Vue实例中-->
<!--可以重新指定插槽中的内容-->
<div id="app">
<one>
<div slot="one" >
<input type="button" value="插one">
<span>代替了name=one的插槽</span>
</div>
</one>
</div>
<!--组件中放入插槽 默认展示插槽的内容-->
<template id="one">
<div>
<slot name="one">我插1</slot>
<slot name="two">我插2</slot>
<slot name="three">我插3</slot>
<slot name="four">我插4</slot>
<slot>我插5</slot>
</div>
</template>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {},
components:{
"one":{
template:"#one"
}
}
})
</script>
脚手架创建Vue项目
现在的Vue脚手架已经升级到3.x版本，即vue-cli3。 脚手架升级之后，安装的命令发生了变化，所以这篇文章会跟大家演示新旧版本的脚手架安装过程，以及使用新旧版本脚手架创建项目的过程。 下面的安装过程均是在window平台下安装。
Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js
我们可以直接到node.js官网下载，然后像安装普通软件一样安装node.js。
node.js成功安装之后，npm一并安装成功，这个时候我们可以打开cmd窗口，输入 node -v 和 npm -v 来查看node.js和npm的版本，如果能够显示出版本，说明已经安装成功。
安装淘宝镜像
为什么要安装淘宝镜像呢？因为我们使用npm来搭建脚手架的时候，是从国外的npm服务器上下载需要的文件，这就导致下载过程会很漫长。我们安装了淘宝镜像之后，就可以从国内的镜像服务器下载搭建脚手架所需的文件，可以很快的完成下载任务。
我们在cmd窗口中输入以下命令来安装淘宝镜像。安装完成之后，我们可以使用命令cnpm -v来查看其版本，如果能够显示版本说明安装成功。
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用node.js安装webpack，vue-cli
使用以下代码在全局下来安装webpack和vue-cli，因为vue脚手架搭建的项目是依赖webpack的，所以一定要安装webpack。
cnpm install webpack -g
cnpm install -g vue-cli
安装完成之后，我们可以使用vue -V和webpack -v命令来查看两者的版本，如果成功显示版本号，说明已经安装成功，注意vue -V中使用大写字母V。
完成安装Vue，就可以通过Vue来创建项目
vue创建项目
找到存放项目文件夹
通过cmd执行命令
进入vue创建的项目使用
//启动项目
cpm run dev
点击连接可以进行查看首页
使用Vue编写代码
创建出来的项目结构
main.js是主程序
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
开始引入了Vue，App,router等组件
进行绑定app，并引入App组件
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这个本身就是组件，可以被其他地方进行引用
同时也是main.js 程序的入口绑定的主页面
vue文件的结构
看到分为三个标签
- template 组件内容
- script js内容
- style 样式内容
HelloWord.vue
当然这个也是一个组件
默认是首页部分的内容
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
路由的文件管理
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。
下面会进行路由的介绍
路由的学习
通过上面我们发现使用脚手架创建Vue项目的时候会生成很多文件
通过main.js指定了主组件APP，并指定了Vue需要的一些js文件和路由的文件
APP.vue中使用了进行路由页面的导入，从而引入了Helloword.vue达到了展示首页的目的
index.js对路由进行了同一的管理等操作
路由可以实现，页面的跳转功能，通过不同路径的访问，访问不同的组件
Vue框架本身并没有提供路由机制，但是官方以插件（vue-router）的形式提供了对路由的支持
官方地址：https://router.vuejs.org/zh/
使用NPM方式来安装路由插件
npm install vue-router
使用Vue-cli脚手架搭建项目，会提示是否需要vue-router，一般
情况都是需要路由功能，所以在此时就已经安装了路由插件
使用脚手架创建项目展示
展示示例
首先创建一个组件，通过脚手架创建出来的项目一个文件就表示一个组件
.vue结尾表示一个组件
创建的Vue文件，相当于一个组件
<template>
<div>
<span>
{{title}}
</span>
<p>{{context}}</p>
<router-link>二</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "One",
data() {
return {
title:'一级路由',
context:'改变router-view中展示的内容'
}
}
}
</script>
<style scoped>
</style>
在index.js中进行组件的绑定路径，下面就可以通过指定的路径进行访问组件
index.js中编写内容
- import导入组件
- 在router数组中添加组件，指定path，component，name属性
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import One from '@/components/One'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/one',
name: 'One',
component: One
}
]
})
在App.vue中编写如何使用组件
使用和
来展示当前选中的展示路由，通过路径来指定选择的是哪一个组件
<template>
<div id="app">
<router-link to="/one">one</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
页面展示
当点击时候进行跳转组件，默认指定的路径是/所以刚开始加载的是 path为 / 的组件页面
上面表示的是一级路由，下面介绍一下二级路由
一级路由，通过多个连接进行跳转页面，二级路由在一级路由中在设置一层路由（相当于父子）
二级路由页面展示
- 首次创建二级路由页面
- 放入index.js中进行绑定
- 如果是一级路由因为实在主页面上展示内容所以和放在App中，现在放在指定的一级路由中
一个路由页面中嵌入另一个路由页面
<template>
<div>
<p>这里是二级路由页面</p>
<div>通过在一级路由页面中展示内容</div>
</div>
</template>
<script>
export default {
name: "Two"
}
</script>
<style scoped>
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import One from '@/components/One'
import Two from '@/components/Two'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/one',
name: 'One',
component: One,
children: [
{
path: 'two',
name: 'Two',
component: Two,
}
]
}
]
})
one页面
<template>
<div>
<span>
{{title}}
</span>
<p>{{context}}</p>
<router-link to="/one/two" >二</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "One",
data() {
return {
title:'一级路由',
context:'改变router-view中展示的内容'
}
}
}
</script>
<style scoped>
</style>
这里注意语法，和二级路由路径
路由之间的跳转传值
在我们页面跳转有的时候需要进行跳转传值，才能更好的进行控制器的操作
下面就介绍页面传值
index.js中的path属性进行编写格式
export default new Router({
routes: [
{
path: '/news/:id',
component: NewsDetail
}
]
})
调用地方的展示
<ul>
<li>
<router-link to="/news/1">第一条新闻</router-link>
</li>
// 省略其他代码
</ul>
取值地方的编写
this.$route.params.指定的属性
上面是一种方式，下面在介绍一种方式
编程时路由，就是写代码的方式进行指定路由传值。上面是直接添加属性
语法：router.push(location)
// 一般使用方式
router.push('home') // 字符串
router.push({ path: ‘home’ }) // 对象
// 命名的路由 -> /user/123
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数 -> /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
示例展示
<!--编程式导航-->
<button @click="goHome">去首页</button>
<button @click="goList">去列表页</button>
goHome() {
//带查询参数
this.$router.push({ path: "home", query: { plan: "private" } });
},
goList() {
//字符串形式
this.$router.push("list");
}
编程式路由的其他方法
导航守卫
导航守卫的作用是路由在跳转前做一些验证，比如登录验证
在跳转页面前后进行的操作，可以进行判断，输出一些语句等信息
基本上就是在方法中进行编写
导航守卫分类
- 全局守卫
- 全局前置守卫
- 全局后置守卫
- 路由独享守卫
- 组件内的守卫
全局守卫出现在mian.js中进行全局设置
全局前置守卫
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// to: Route 即将要进入的目标路由对象
// from: Route 当前导航正要离开的路由
// next: Function 要调用该方法来执行钩子函数
})
全局前置守卫示例
在main.js中使用
router.beforeEach((to, from, next) => {
if (to.path == "/login") {
next();
} else {
//是否登录
let islogin=false
if (islogin) {
next()
} else {
console.log("没有登录，请先登录")
next({ path: "/login" })
} }
});
全局后置守卫
const router = new VueRouter({ ... })
router.afterEach((to, from) => {
// to: Route 即将要进入的目标路由对象
// from: Route 当前导航正要离开的路由
})
路由独享守卫
- 使用方法与全局守卫相同，不同的是全局守卫可以作用于全局，路由独享守卫只作用于被设置守卫的路由
- 路由独享守卫与全局前置守卫的方法参数是完全一样
{
path: '/login',
name: 'Login',
component: Login,
//路由独享守卫
beforeEnter: (to, from, next) => {
console.log('登录页面')
next()
}
}
组件内的守卫
组件内的守卫需要注意与methods同级，组件守卫分类
beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用
beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
beforeRouteLeave 导航离开该组件的对应路由时调用
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
console.log("该组件被复用时调用");
next();
}
扫一扫
3594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
