溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vue 開發之路由配置方法。分享給大家供大家參考，具體如下：
概要
用 Vue.js + vue-router 創建單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當你要把 vue-router 添加進來，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。
實現代碼
1.在main.js 中引入 router.3
import router from './router/index'
2.在main.js 中使用router
global.globalVm = new Vue({
el: '#app',
router,
render: function(h) {
return h(App);
},
store,
watch: {
'$route' (to, from) {
globalVm.$dialog.loading.close();
curPath = to.name;
}
}
});
這里導入了 router 配置,頁面使用這個路由進行頁面切換。
3. 組件渲染的位置。
我們可以看到 App.vue 組件，頁面組件渲染到 <router-view ></router-view>標簽中。
<template>
<div id="app">
<transition :name='direction'>
<keep-alive>
<router-view :resize="Resize" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition :name='direction'>
<router-view :resize="Resize" v-if="!$route.meta.keepAlive"></router-view>
</transition>
<loading v-model="isLoading" String="加載中" ></loading>
</div>
</template>
router-view 這個是vue 組件渲染的地方。
4.組件路由配置
index.js 配置如下：
export default new Router({
routes: [
{
path: '/login',
name: 'login',
component: Login,
meta:{
layer:0
}
},
{
path: '/',
name: 'root',
redirect:"/index",
meta:{
layer:1
}
},
{
path: '/myToDo',
name: 'myToDo',
component: resolve => require(['@/components/bpm/MyToDo'], resolve),
meta:{
layer:2
}
},
{
path: '/MyAttend',
name: 'myAttend',
component: resolve => require(['@/components/bpm/MyAttend'], resolve),
meta:{
layer:2
}
},
{
path: '/getInstInfo/:instId/:type',
name: 'getInstInfo',
component:resolve => require(['@/components/bpm/GetInstInfo'], resolve),
mata:{
layer:3
}
},
4.1 根組件的配置
{
path: '/',
name: 'root',
redirect:"/index",
meta:{
layer:1
}
這個屬性是用來組件做切換使用的，通過這個layer 屬性，我們可以決定組件的動畫。
App.vue 文件
4.2 登錄組件的配置
import Login from '@/components/Login'
{
path: '/login',
name: 'login',
component: Login,
meta:{
layer:0
}
}
component: Login
引入組件，指定登錄組件。
4.3 懶加載組件
當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。
{
path: '/myToDo',
name: 'myToDo',
component: resolve => require(['@/components/bpm/MyToDo'], resolve),
meta:{
layer:2
}
}
component: resolve => require(['@/components/bpm/MyToDo'], resolve),
4.4 組件參數配置
{
path: '/task/:taskId',
name: 'task',
component:resolve => require(['@/components/bpm/TaskDetail'], resolve),
mata:{
layer:3
}
}
這里我們定義了一個 taskId 參數。
4.5 組件切換
1.頁面中進行切換。
<rx-list-item
v-for="item in list"
:key="item.id"
:href="{name:'task',params:{taskId:item.id}}" rel="external nofollow"
type='link'
class="item-a"
>
這里我們可以看到 ，指定了組件的名稱，還有參數配置。
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
2.編程方式進行切換。
我們在保存數據成功后，需要跳轉到提示組件，我們可以使用一下代碼。
router.push({ name: 'user', params: { userId: 123 }})
4.6 路由HISTORY模式
vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。
url 路徑樣式為：
http://yoursite.com#/user/1
如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。
當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
