vue中部分問題總結
一 vue-router部分
***在路由之間傳遞params參數
path: ‘/detail/:id‘ 動態路徑參數
<li> <router-link to="/word/router1/123">路由1</router-link> </li>
<router-link :to="{path: ‘/detail/‘ + this.$route.params.id}" >此團詳情</router-link>
***在路由跳轉地方傳遞query參數
<router-link v-bind:to="{path:‘/word/router2‘,query:{id:123}}">
</router-link>
***路由跳轉三種方式
// 用命名路由的方式：
<router-link :to="{name:‘detail‘,params:{id:this.$route.params.id }}" >路由</router-link>
// 用router.push()的方式
router.push({name:‘detail‘, params:{ id: this.$route.params.id}})
//用replace實現頁面的跳轉
this.$router.replace({path:‘/word/router2‘,query:{id:123}});
***路由前進後退 this.$router.go(1);
***路由重定向 redirect:‘/word/router3‘
***定義路由的時可配置 meta
const routes = [{path:‘/activity‘, meta: {isNeedAuth: false, title: ‘活動‘}},];
***組件的異步加載(按需加載組件) vue-router懶加載
當頁面很多，組件很多的時候，會發現頁面在首次加載的時候異常的慢，這個是因為vue首次加載的時候把可能一開始看不見的組件也一次加載了，這個時候就需要對頁面優化了，就需要異步組件了。如何去寫異步組件呢，只需要在你的路由
方式一：{ path: ‘/home‘,
name: ‘Home‘,
component: function(resolve){
require([‘url‘], resolve)//懶加載
或者： component: resolve => require([URL], resolve),//懶加載
註意： component: require(‘url‘) //這是直接加載！
}
}
方式二：在項目router/index.js文件中將
import good from ‘url‘ 改為：
Const good=(resolve)=>{ import(‘url‘).then((module)=>{ resolve(module) })}//懶加載
方式三：在項目router/index.js 文件中將
import good from ‘url‘ 改為：
Const good =require.ensure([],()=>r(require(‘url’)),’good’) //懶加載
之後執行npm run build，可以看出app.xxx.js被分成了一個個小的js文件，根據按需加載，這樣就大大縮短了項目的加載時間，更加高效。
***vue+axios實現路由登錄攔截 （暫時可不看）
參考https://www.cnblogs.com/guoxianglei/p/7084506.html
首先，在定義路由的時候就需要多添加一個自定義字段requireAuth，用於判斷該路由的訪問是否需要登錄
const routes = [
{
path: ‘/repository‘,
name: ‘repository‘,
meta: {
requireAuth: true, // 添加該字段，表示進入這個路由是需要登錄的
},
component: Repository
},
];
然後，我們主要是利用vue-router提供的鉤子函數beforeEach()對路由進行判斷
router.beforeEach((to, from, next) => {
。。。
})
最後，用 axios 的攔截器
// http request 攔截器
axios.interceptors.request.use(。。。）
// http response 攔截器
axios.interceptors.response.use(。。。）
二 vue組件間通信
1 一個子組件使用$emit(‘eventName‘, param);發送事件, 在父組件通過@eventName="listenEvent(父組件事件名字)"
// 父組件
export default {
methos: {
listenEvent (data) {
// data 即為子組件傳遞過來的參數
}
}
}
vue中部分問題總結