vue2.5+在vue-cli3.0中使用

页面跳转使用

<template><div><router-link to="/a">跳转到A页面</router-link></div>
</template>

跳转到指定页面时候有两种跳转方法

使用指定的页面名字

<router-link :to="{name: 'Home'}">Home</router-link>

使用指定的页面地址

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

使用router-link时候，需要在routers里面进行注册需要跳转的页面

const routes = [{path: '/a',name: 'A',component: () => import('../views/A.vue')},
]

路由的引用方式

router-link 标签

 <router-link to="/">返回path为/的路径</router-link><button @click="goToMenu" class="btn btn-success">上一次页面</button>

方法中调用

this.$router.push('/') //跳转到根目录
this.$router.go(-1) //跳转到上一次浏览的页面

路由地址中传参

<router-link v-if="ok" :to="{path:'/mainPage',query:{title:'首页',mcontent:'首页内容在此'}}"></router-link>

this.$router.push({path:'/mainPage',query:{title:'首页',mcontent:'首页内容在此'}});

接收参数

<h3>{{$route.query.title}}-{{$route.query.mcontent}}</h3>

main.js中给配置的作用及解释

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'Vue.config.productionTip = falsenew Vue({router,// 等于router:router, --default import the routers of file router's index pagestore,// 等于store:store, render: h => h(App)// 等于render: (function(h)){return h(App)} // 等于render: function (createElement) {//   return createElement(//      'h' + this.level,    // tag name 标签名称//       this.$slots.default // 子组件中的阵列//     )//   }// 又等于components: {App},  加载App组件form './App.vue'// 又等于template: '<App/>', 将挂载点替换为<App/>节点，挂载点内容清空
}).$mount('#app')
// 等于 el: '#app', 默认挂在到index.html中的#app

图片解释main.js

经过cli自带的一顿操作，启动项目就会自动将App.vue页面加载到index.html中，并且将Aome.vue和About.vue都注册到router下index.js中的routes中，我们要是图方便，修改时候可以直接从App.vue中进行页面修改。

页面中调用其他小组件，并且向组件传递参数

router文件夹中index.js中路由器的参数设置

嵌套路由：

在路由中设置子路由
在父路由页面中设置以下代码，才可进行跳转

<router-link to="/child1">跳转到child1</router-link>
<router-link to="/child2">跳转到child2</router-link>
<router-view/>

注意如果直接访问子路由所在的页面，会自动加载出父路由所在的页面的内容

打开项目之后
1最先访问index.html.
2执行main.js，将router，shore，component加载，
3执行main.js的component将原来的app挂载点替换为app.vue，
4执行router中设置的根目录访问页面，将页面正确显示

安装并全局注册axios
安装时，在项目相应位置的控制台中输入
cnpm i axios -S
然后在项目的main.js中进行全局配置

import axios from 'axios'
Vue.prototype.$axios=axios

使用axios进行数据请求

this.$axios.get("url").then(function(res){_this.list=res.data
})

给项目添加消息盒子进行项目间参数传递
在coomponent文件夹中添加一个msg.js文件，并在文件中写入以下内容

import Vue from 'vue'
export default new Vue

在向外传递参数的页面的<script>中，首先引入消息盒子，然后写方法向外发送一个数据

import Msg from './msg.js'export default{methods:{beclick:function(){Msg.$emit("val","1")}}
}

然后在接收数据的页面的<script>中填写以下代码进行参数的接收。

import Msg from './msg.js' // ./代表当前目录 ../代表上一级export default{data(){return {value: 0}}methods:function(){var _this=this //将this对象复制一个副本，因为this在代码运行中会不断的改变指向，所以复制Msg.$on("val",function(m){// 此处使用_this表示之前保存的指向_this.value=m })}

因为这里写的是一个向外发送消息的方法，所以我猜测应该是项目中所有的写了接收消息的地方，都能收到此次发送的消息的内容

调用组件时，对组件进行传值方法一：

调用时，写如下代码

<StudentComponent :studentId="1"></StudentComponent>

2.接收时，在被调用组件的<script>中写入如下代码进行接收

props:{studentId: Number
}

调用组件时，对组件进行传值方法二：

<!-- 调用helloworld组件并传递参数 --><HelloWorld msg="Welcome to Your Vue.js App"/>

接收时，在被调用组件的html中写入如下代码进行接收

<div class="hello"><h1>{{ msg }}</h1>
</div>

vue2.5+在vue-cli3.0中使用相关推荐

Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题参考文章: (1)01-路由跳转安装less this.$router.re ...
vue 2.0 中函数`return false` 使用
vue 2.0 中函数return false 使用问题在注册页面下,判断输入框是否为空,想把这种函数封装一下,外部调用,返回return false 时,只是终止当前的判断函数,不是终止整个注 ...
vue cli3.0 引入eslint 结合vscode使用
ESLint 它的目标是提供一个插件化的javascript代码检测工具. 官网地址最近一个项目里,最开始使用cli3.0搭建的时候没有默认选用eslint,导致现在有的人使用其他编辑器,就会出现格 ...
vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
错误: throw new Error(^Error:Vue packages version mismatch:- vue@2.6.12 (C:\Users\Administrator\AppDat ...
Vue 3.0 中配置原生高德地图
直接引用高德地图 SDK 1.在根目录 public 文件夹下的 index.html 中加入 <script type="text/javascript" src=&quo ...
id vue2路由传参_Vue2.0中 $route 和 $router 的区别
在做Vue项目时,在路由设置和跳转时有没有遇到过 $route 和 $router?乍一看,两个看起来几乎一模一样,有点傻傻分不清楚,他们到底有什么区别?在什么情况下用呢? 我们把这2个在控制台打印出 ...
vue cli3.0 修改配置文件
问题:资源找不到新版的vue-cli构建出来的项目目录没有build和config文件夹,需要改输入路径的地址,需要在项目的根目录添加一个Vue.config.js. 修改资源目录 module. ...

vue2.5+在vue-cli3.0中使用

vue2.5+在vue-cli3.0中使用相关推荐

最新文章

热门文章