頁面跳轉使用

<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中使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。