簡單實例

baseRouter.js

Vue.js 路由需要載入 [vue-router 庫]
模塊化處理

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
// 定義路由配置
let routes = []
let concat = (router) => {
  routes = routes.concat(router)
}
// // 導入路由規(guī)則
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由規(guī)則
concat(HomeRouter)
concat(CmsRouter)
export default routes;

moduleRouter.js

擴展其他路由

import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
import page_add from '@/module/cms/page/page_add.vue';
import page_edit from '@/module/cms/page/page_edit.vue'
export default [{
    path: '/',
    component: Home,
    name: 'CMS',
    hidden: false,
    children:[
        { path: '/cms/page/list',name: '頁面列表',component: page_list,hidden: false},
        { path: '/cms/page/add',name: '新增頁面',component: page_add,hidden: true},
        { path: '/cms/page/edit/:pageId',name: '修改頁面',component: page_edit,hidden: true},
    ]
  }
]

<router-link>

to
表示目標路由的鏈接抹蚀。 當被點擊后葬燎，內(nèi)部會立刻把 to 的值傳到 router.push()，所以這個值可以是一個字符串或者是描述目標位置的對象蚯根。

html頁面跳轉(zhuǎn)

<!--跳轉(zhuǎn)到http://.../cms/page/add?page=...&siteId=...-->
<router-link :to="{path:'/cms/page/add',query:{
                page:this.params.page, //攜帶參數(shù) 
                siteId:this.params.siteId  
            }}">
    <el-button type="primary" size="small">跳轉(zhuǎn)頁面</el-button>
</router-link>

Js頁面跳轉(zhuǎn)

goback() {
     this.$router.push({
         path: '/cms/page/list',
         query: { //攜帶Url中的page,siteId
              page: this.$route.query.page,
              siteId: this.$route.query.siteId
         }
     })
}

動態(tài)url跳轉(zhuǎn)

例如地址為http://.../cms/page/edit/{id}
想要獲取id的值
在定義router 路徑的時候 加上 :id

baseRouter.js

import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
import page_add from '@/module/cms/page/page_add.vue';
import page_edit from '@/module/cms/page/page_edit.vue'
export default [{
    path: '/',
    component: Home,
    name: 'CMS',
    hidden: false,
    children:[
        { path: '/cms/page/list',name: '頁面列表',component: page_list,hidden: false},
        { path: '/cms/page/add',name: '新增頁面',component: page_add,hidden: true},
          //這里加上:pageId 下面js才能使用
        { path: '/cms/page/edit/:pageId',name: '修改頁面',component: page_edit,hidden: true},
    ]
  }
]

js獲取url參數(shù)

//獲取http://localhost/cms/page/edit/{pageId}
this.pageId=this.$route.params.pageId;