简单实例

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)
}
// // 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
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
表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

html页面跳转

<!--跳转到http://.../cms/page/add?page=...&siteId=...-->
<router-link :to="{path:'/cms/page/add',query:{
                page:this.params.page, //携带参数 
                siteId:this.params.siteId  
            }}">
    <el-button type="primary" size="small">跳转页面</el-button>
</router-link>

Js页面跳转

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

动态url跳转

例如地址为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参数

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