Vue2.0外掛之一:使用vue-router外掛
阿新 • • 發佈:2019-02-07
本文只要介紹vue-router基本用法與常見的問題
一、vue-router外掛的安裝
使用 npm:
$ cnpm install vue-router
二、vue-router外掛的引用
出於頁面的優雅考慮,使用vue2.0 vue-cli腳手架的程式碼風格去實現。
1、建立引用檔案:
用ide開啟專案檔案,在src目錄下建立資料夾router,後在資料夾內建立index.js。如圖:
2.編寫引用的相關程式碼:
step1: router資料夾下的index.js:
/*引入Vue框架*/
import Vue from 'vue';
/*引入資源請求外掛*/
import Router from 'vue-router';
/*使用router外掛*/
Vue.use(Router);
export default({
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
拓展router-link: 以下是路由的一些知識點的應用,包含元件懶載入、自定義元件的引用、巢狀路由的使用,可以選擇跳過,直接看step2
1-1 router資料夾下的index.js:
/*引入Vue框架*/
import Vue from 'vue';
/*引入資源請求外掛*/
import Router from 'vue-router';
import goods from '@/components/goods/goods';//注:goods是某個定義的元件,在components新建goods資料夾,建立goods.vue檔案,而後在template內div輸入‘我是商品’(可自定義)下列的seller、discuss、profile、UserProfile類似
import seller from '@/components/seller/seller';
import discuss from '@/components/discuss/discuss';
import userCenter from '@/components/userCenter/userCenter';//這是巢狀路由頁面,請看特別備註
import profile from '@/components/profile/profile';
import UserProfile from '@/components/userCenter/profile';
/*使用router外掛*/
Vue.use(Router);
// 1. 定義(路由)元件。
// 可以從其他檔案 import 進來
const Posts = resolve => require(['../components/goods/goods'], resolve);//懶載入,
import goods from '@/components/goods/goods';//此方法與上述懶載入的效果一樣Posts===goods
const routes =[];
// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器,
// 或者,只是一個元件配置物件。
export default new Router({
mode: 'history',
// 關鍵在這裡,設定afterEach鉤子函式
routes: [
{
path: '/', redirect: { name: 'goods' },//初始重定向載入頁面,此處的‘/’是讓頁面載入進來的第一個頁面是goods的內容
},
{ path: '/goods', name: 'goods', component: goods,
},
{ path: '/seller', name: 'seller', component: seller,
},
{ path: '/discuss', name: 'discuss', component: discuss,
},
//此處是路由的巢狀
{ path: '/userCenter',
name: 'userCenter',
component: userCenter,
children: [
{ path: '/UserProfile', name: 'UserProfile', component: UserProfile },
{ path: '/Posts', name: 'Posts', component: Posts },
{ path: '/profile', name: 'profile', component: profile }
]
}
],
});
1-2 goods資料夾下的 goods.vue:
<template>
<div class="goods">
我是商品
</div>
</template>
<script>
export default {
name: "goods"
}
</script>
<style lang="stylus"></style>
1-3 userCenter資料夾下的userCenter:
<template>
<div>
<div class="userCenter">
我是使用者中心
</div>
<div class="tab">
<!--<router-link to="/userCenter" class="tab-item">Go to user</router-link>-->
<router-link to="/UserProfile" class="tab-item">Go to profile</router-link>
<router-link to="/Posts" class="tab-item">Go to Posts</router-link>
<router-link to="/profile" class="tab-item">Go to profile</router-link>
</div>
<router-view/>
</div>
</template>
<script>
export default {
// 物件
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
#app
.tab
display flex
width 100%
height 40px
line-height 40px
.tab-item
flex 1
text-align center
overflow hidden
text-overflow ellipsis
white-space nowrap
</style>
相關結構圖如下:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
step2: src下的main.js,程式碼引入已經引用好的vue-route檔案:
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/>'
});
tip:如果程式碼沒有反應,請用cmd進入到專案目錄,$cnpm run dev。
step3: App.vue頁面的路由請求
<template>
<div id="app">
<div class="header">
i am header
</div>
<div class="tab">
<div class="tab-item">
<!-- 使用 router-link 元件來導航. -->
<!-- 通過傳入 `to` 屬性指定連結. -->
<!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
<router-link to="goods" class="tab-item">goods</router-link>
</div>
<div class="tab-item">
<router-link to="/seller" class="tab-item">seller</router-link>
</div>
<div class="tab-item">
<router-link to="/discuss" class="tab-item">discuss</router-link>
</div>
</div>
<div class="tab">
<router-link to="/Posts" class="tab-item">Go to Posts</router-link>
<router-link to="/profile" class="tab-item">Go to profile</router-link>
</div>
<div class="tab">
<router-link to="/userCenter" class="tab-item">Go to user</router-link>
<router-link to="/UserProfile" class="tab-item">Go to UserProfile</router-link>
</div>
<router-view class="view two" name="goods"></router-view>
<router-view class="view three" name="seller"></router-view>
<router-link :to="{ name: 'userCenter'}">userCenter</router-link>
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
圖2-1 執行的效果如下圖:
圖2-2 巢狀路由頁面操作如下圖:
至此,你已經能運用vue-router成功呼叫自定義元件了。