vue 路由的配置和使用——1.0
阿新 • • 發佈：2018-12-20
先來說說功能然後在說路由的配置，先大概清楚了專案的流程然後在配置路由會讓你在後面的工作的更加順利，頭腦更加清晰！
比如說我的專案中一般都是需要登入的，最關鍵的不操作一定時間使用者會預設退出，這時候在獲取使用者資訊就是未登入的，還有就是有一些公共的地方，只是某一部分需要切換。
來上程式碼： （說明在程式碼下面）
export default new Router({
routes: [
{
path:'/', //load
name:"loadding",
component: resolve => require(['../components/page/loadding.vue'], resolve),
},
{
path: '/', //這裡是主頁面，公共的和切換的都放到這個頁面，
component: resolve => require(['../components/common/Home.vue'], resolve),
children:[
{
path:'/login', //登入
name:"login",
component: resolve => require(['../components/page/Login.vue'], resolve)
},
{
path:'/nopersition', //無許可權頁面
name:"nopersition",
component: resolve => require(['../components/page/nopersition.vue'], resolve)
},
{
path:'/index', //首頁
name:'index',
component: resolve => require(['../components/Home/index.vue'], resolve),
},
{
path:'/step1', //步驟1
name:"step1",
component: resolve => require(['../components/Home/step/step1.vue'], resolve),
},
{
path:'/step2', //步驟2
name:"step2",
component: resolve => require(['../components/Home/step/step2.vue'], resolve),
},
{
path:'/step3', //步驟3
name:"step3",
component: resolve => require(['../components/Home/step/step3.vue'], resolve),
},
{
path:'/organizationDetails', //詳情頁面
name:'organizationDetails',
component: resolve => require(['../components/Home/organizationMore/organizationDetails.vue'], resolve)
}
]
}
]
})那麼為什麼要這樣寫呢？有一個方便的地方，那就是因為每次跳轉頁面都要知道使用者是否還是登陸狀態，如果不是就要提示他去登陸或者調到登陸頁面去。這樣寫的話只要在index.vue首頁上面監聽路由來判斷就好了。那麼怎麼監聽路由，怎麼寫呢，會的小夥伴兒就不用看下一個了，不會的請看下一個！