頁面跳轉(zhuǎn)使用

<template><div><router-link to="/a">跳轉(zhuǎn)到A頁面</router-link></div> </template>

跳轉(zhuǎn)到指定頁面時(shí)候有兩種跳轉(zhuǎn)方法

使用指定的頁面名字

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

使用指定的頁面地址

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

使用router-link時(shí)候，需要在routers里面進(jìn)行注冊(cè)需要跳轉(zhuǎn)的頁面

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

路由的引用方式

router-link 標(biāo)簽

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

方法中調(diào)用

this.$router.push('/') //跳轉(zhuǎn)到根目錄 this.$router.go(-1) //跳轉(zhuǎn)到上一次瀏覽的頁面

路由地址中傳參

<router-link v-if="ok" :to="{path:'/mainPage',query:{title:'首頁',mcontent:'首頁內(nèi)容在此'}}"></router-link> this.$router.push({path:'/mainPage',query:{title:'首頁',mcontent:'首頁內(nèi)容在此'}});

接收參數(shù)

<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 標(biāo)簽名稱// this.$slots.default // 子組件中的陣列// )// }// 又等于components: {App}, 加載App組件form './App.vue'// 又等于template: '<App/>', 將掛載點(diǎn)替換為<App/>節(jié)點(diǎn)，掛載點(diǎn)內(nèi)容清空 }).$mount('#app') // 等于 el: '#app', 默認(rèn)掛在到index.html中的#app

圖片解釋main.js

經(jīng)過cli自帶的一頓操作，啟動(dòng)項(xiàng)目就會(huì)自動(dòng)將App.vue頁面加載到index.html中，并且將Aome.vue和About.vue都注冊(cè)到router下index.js中的routes中，我們要是圖方便，修改時(shí)候可以直接從App.vue中進(jìn)行頁面修改。

頁面中調(diào)用其他小組件，并且向組件傳遞參數(shù)

router文件夾中index.js中路由器的參數(shù)設(shè)置

嵌套路由：

在路由中設(shè)置子路由

在父路由頁面中設(shè)置以下代碼，才可進(jìn)行跳轉(zhuǎn)

<router-link to="/child1">跳轉(zhuǎn)到child1</router-link> <router-link to="/child2">跳轉(zhuǎn)到child2</router-link> <router-view/>

注意如果直接訪問子路由所在的頁面，會(huì)自動(dòng)加載出父路由所在的頁面的內(nèi)容

打開項(xiàng)目之后
1最先訪問index.html.
2執(zhí)行main.js，將router，shore，component加載，
3執(zhí)行main.js的component將原來的app掛載點(diǎn)替換為app.vue，
4執(zhí)行router中設(shè)置的根目錄訪問頁面，將頁面正確顯示

安裝并全局注冊(cè)axios
安裝時(shí)，在項(xiàng)目相應(yīng)位置的控制臺(tái)中輸入
cnpm i axios -S
然后在項(xiàng)目的main.js中進(jìn)行全局配置

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

使用axios進(jìn)行數(shù)據(jù)請(qǐng)求

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

給項(xiàng)目添加消息盒子進(jìn)行項(xiàng)目間參數(shù)傳遞
在coomponent文件夾中添加一個(gè)msg.js文件，并在文件中寫入以下內(nèi)容

import Vue from 'vue' export default new Vue

在向外傳遞參數(shù)的頁面的<script>中，首先引入消息盒子，然后寫方法向外發(fā)送一個(gè)數(shù)據(jù)

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

然后在接收數(shù)據(jù)的頁面的<script>中填寫以下代碼進(jìn)行參數(shù)的接收。

import Msg from './msg.js' // ./代表當(dāng)前目錄 ../代表上一級(jí)export default{data(){return {value: 0}}methods:function(){var _this=this //將this對(duì)象復(fù)制一個(gè)副本，因?yàn)閠his在代碼運(yùn)行中會(huì)不斷的改變指向，所以復(fù)制Msg.$on("val",function(m){// 此處使用_this表示之前保存的指向_this.value=m })}

因?yàn)檫@里寫的是一個(gè)向外發(fā)送消息的方法，所以我猜測(cè)應(yīng)該是項(xiàng)目中所有的寫了接收消息的地方，都能收到此次發(fā)送的消息的內(nèi)容

調(diào)用組件時(shí)，對(duì)組件進(jìn)行傳值方法一：

調(diào)用時(shí)，寫如下代碼

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

2.接收時(shí)，在被調(diào)用組件的<script>中寫入如下代碼進(jìn)行接收

props:{studentId: Number }

調(diào)用組件時(shí)，對(duì)組件進(jìn)行傳值方法二：

<!-- 調(diào)用helloworld組件并傳遞參數(shù) --><HelloWorld msg="Welcome to Your Vue.js App"/>

接收時(shí)，在被調(diào)用組件的html中寫入如下代碼進(jìn)行接收

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

總結(jié)

以上是生活随笔為你收集整理的vue2.5+在vue-cli3.0中使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。