vue-router动态路由配置
实现动态路由配置关键是路由嵌套配合router-view(可以看作一个容器,存放匹配到的路由组件)例:{path: '/', //匹配第一层菜单component: Layout,//整体布局的组件redirect: '/dashboard',children: [{//匹配一级菜单下的二级菜单(匹配的结果会放入<router-view />中)path: 'dashboard',na
·
引入路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
动态路由匹配
实现动态路由配置关键是路由嵌套配合router-view(渲染匹配到的路由组件)
例:
export const constantRoutes = [
{
path: '/', //匹配第一层菜单
component: Layout,//本条路由映射的组件
redirect: '/dashboard',
children: [{ //匹配一级菜单下的二级菜单(匹配的结果会放入<router-view />中)
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),//二级菜单映射的组件
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
//暴露路由
export default router
更多推荐
已为社区贡献12条内容
所有评论(0)