精华内容
下载资源
问答
  • 最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,...
  • 这篇文章主要为大家详细介绍了vue动态路由实现多级嵌套面包屑的思路与方法,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!前言最近在工作中遇到了一个问题,是...

    这篇文章主要为大家详细介绍了vue动态路由实现多级嵌套面包屑的思路与方法,具有一定的参考价值,可以用来参考一下。

    感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!

    前言

    最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id)

    功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a;/b/03;/bdetail/01)

    思路:获取所有进入的层级的路由和名称如breadlist=[{path:'/a',name:'一级'},{path:'/b/03',name:'二级'},{path:'/bdetail/01',name:'三级'}],然后遍历出来如:{{item.name}}

    做法

    下面贴出相关代码:

    A列表页面跳转按钮:(breadNum记录面包屑层级)

    代码如下:

    B列表页面跳转按钮:

    代码如下:

    breadcrumb.vue页面:

    代码如下:

    {{item.name}}

    export default{

    created() {

    this.getBreadcrumb();

    },

    data() {

    return {

    breadlist: '' // 路由集合

    }

    },

    methods: {

    getBreadcrumb() {

    var breadNumber= this.$route.query.breadNum || 1;//url变量breadNum记录层级,默认为1,如果大于1,要添加上变量;

    var breadLength=this.$store.state.breadListState.length;//目前breadlist集合数组个数

    var curName=this.$route.name;

    var curPath=this.$route.fullPath;

    var newBread={name:curName,path:curPath};

    var ishome=curName=='首页';

    console.log(ishome);

    if(breadNumber===1){//点击一级菜单

    this.$store.commit('breadListStateRemove',1);//初始化,只有首页面包屑按钮

    if(!ishome)//如果不是首页

    this.$store.commit('breadListStateAdd',newBread);//当前页面添加到breadlist集合

    }

    else if(breadLength<=breadNumber){//如果不是一级导航,并且breadlist集合个数等于或者小于目前层级

    this.$store.commit('breadListStateAdd',newBread);//要把当前路由添加到breadlist集合

    }else{

    this.$store.commit('breadListStateRemove',parseInt(breadNumber)+1);//如果往回点面包屑导航,截取;

    }

    this.breadlist=this.$store.state.breadListState;

    console.log(this.breadlist);

    }

    },

    watch: {

    $route () {

    this.getBreadcrumb();

    }

    },

    }

    状态管理store.js代码:

    代码如下:

    export default store = new Vuex.Store({

    state: {

    breadListState:[

    {name:'首页',path:'/'}

    ]

    },

    mutations: {

    breadListStateAdd(state,obj){

    state.breadListState.push(obj);

    },

    breadListStateRemove(state,num){

    state.breadListState=state.breadListState.slice(0,num);

    }

    }

    })

    路由route.js代码:

    代码如下:

    {

    path: '/',

    name: '首页',

    component: Main,

    redirect:'/home',

    children:[

    {path: '/a',name: 'A页面',component: APage},

    {path: '/b/:id',name: 'B页面',component: BPage},

    {path: '/bdetail/:id',name: 'C页面',component: CPage},

    ]

    }

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对512笔记的支持。

    注:关于vue动态路由实现多级嵌套面包屑的思路与方法的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。

    关键词:vue.js

    展开全文
  • 前言最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id)功能比如:A列表页面路由如/a...

    前言

    最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id)

    功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a;/b/03;/bdetail/01)

    思路:获取所有进入的层级的路由和名称如breadlist=[{path:'/a',name:'一级'},{path:'/b/03',name:'二级'},{path:'/bdetail/01',name:'三级'}],然后遍历出来如:

    做法

    下面贴出相关代码:

    A列表页面跳转按钮:(breadNum记录面包屑层级)

    B列表页面跳转按钮:

    breadcrumb.vue页面:

    Box">

    状态管理store.js代码:

    首页',path:'/'}

    ]

    },mutations: {

    breadListStateAdd(state,obj){

    state.breadListState.push(obj);

    },breadListStateRemove(state,num){

    state.breadListState=state.breadListState.slice(0,num);

    }

    }

    })

    路由route.js代码:

    首页',component: Main,redirect:'/home',children:[

    {path: '/a',name: 'A页面',component: APage},{path: '/b/:id',name: 'B页面',component: BPage},{path: '/bdetail/:id',name: 'C页面',component: CPage},]

    }

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。

    总结

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    如您喜欢交流学习经验,点击链接加入交流1群:1065694478(已满)交流2群:163560250

    展开全文
  • 作者:lxcan转发链接:https://segmentfault.com/a/1190000022431839一、整体思路后端返回用户权限,前端...二、实现要点(1)路由定义,分为初始路由和动态路由,一般来说初始路由只有 login,其他路由都挂载在 home ...
    2dffc09dca870f15a275b7369e805e55.png

    作者:lxcan

    转发链接:https://segmentfault.com/a/1190000022431839

    一、整体思路

    后端返回用户权限,前端根据用户权限处理得到左侧菜单;所有路由在前端定义好,根据后端返回的用户权限筛选出需要挂载的路由,然后使用 addRoutes 动态挂载路由。

    二、实现要点

    (1)路由定义,分为初始路由和动态路由,一般来说初始路由只有 login,其他路由都挂载在 home 路由之下需要动态挂载。

    (2)用户登录,登录成功之后得到 token,保存在 sessionStorage,跳转到 home,此时会进入路由拦截根据 token 获取用户权限列表。、

    (3)全局路由拦截,根据当前用户有没有 token 和 权限列表进行相应的判断和跳转,当没有 token 时跳到 login,当有 token 而没有权限列表时去发请求获取权限等等逻辑。

    (4)处理用户权限,在 store.js 定义一个模块 permission.js,专门用于处理用户权限相关的逻辑,用户权限列表、菜单列表都保存在此模块;

    (5)用户权限列表、菜单列表的处理,前端的路由要和后端返回的权限有一个唯一标识(一般用路由名做标识符),根据此标识筛选出对应的路由。

    (6)左侧菜单,要和用户信息、用户管理模块使用的菜单信息一致,统一使用保存在 store 中的变量。

    三、具体实现流程

    1、准备工作,路由定义

    /* router/indes.js *//* 初始路由 */let router = new Router({    mode: 'history',    routes: [        {            path: '/login',            name: 'login',            component: () => import('@/views/login.vue'),        },    ]});
    /* router/indes.js *//* 准备动态添加的路由 */export const dynamicRoutes = [    {        path: '/',        name: 'home',        component: () => import('@/views/home.vue'),        meta: {            requiresAuth: true,        },        children: [            // 用户信息            {                path: '/user-info',                name: 'user-info',                component: () => import('@/views/user-setting/user-info.vue'),            },            // 修改密码            {                path: '/user-password',                name: 'user-password',                component: () => import('@/views/user-setting/user-password.vue'),            },        ]    },    {        path: '/403',        component: () => import('@/views/error-page/403'),    },    {        path: '*',        component: () => import('@/views/error-page/404'),    },];

    系统主要页面的路由,后续会将这些路由经过权限筛选,添加到 home 路由的 children 里面

    /* router/router.js */export default [    // 部署管理    {        path: '/deploy-manage',        name: 'deploy-manage',        component: () => import('@/views/sys-admin/deploy-manage/deploy-manage.vue'),        meta: {            permitName: 'deploy-manage',        }    },    // ...];

    2、用户登录

    用户进入登录页,输入用户名、密码、验证码,点击登录,发送登录请求,登录成功之后,将 token 保存在 sessionStorage,然后跳转到首页 /home ,进入路由拦截的逻辑。

    /* login.vue */// 发送登录请求vm.$http.login(params, data => {    sessionStorage.token = data.token;    // ...    // 跳转到首页 home。这里会触发全局路由拦截 router.beforeEach    vm.$router.push({ name: 'home' });}, err => {    console.log(err);});

    3、全局路由拦截

    首先从打开本地服务 http://localhost:2001 开始,打开后会进入 login 页面,那么判断的依据是什么?首先是 token。没有登录的用户是拿不到 token 的,而登录后的用户我们会将 token 存到 seesionStorage,因此,根据当前有没有 token 即可知道是否登录。

    /* 全局路由拦截 */router.beforeEach((to, from, next) => {    // 根据有没有token判断是否登录    if (!sessionStorage.token) {        // 1、当用户打开localhost,to.matched === [],匹配的是空路由,此时需要重定向到login        // 2、重定向到login之后,to.matched === [name: "login", path: "/login"...] 就是上一步的login页面        // to.matched.some(item => item.meta.requiresAuth) 这句的意思是 进入的路由页需要登录认证,取反就是不用登录,直接通过        if (to.matched.length > 0 && !to.matched.some(item => item.meta.requiresAuth)) {            next(); // 跳过,进入下一个导航钩子。比如:在 /login 路由页刷新页面会走到此逻辑        } else {            next({ path: '/login' });        }    } else {        // 现在有token了        if (!store.state.permission.permissionList) {            // 如果没有 permissionList,发请求获取用户权限列表            store.dispatch('permission/FETCH_PERMISSION').then(() => {                next({ path: to.path, query: to.query });            });        } else {            // 现在有 permissionList 了            if (to.path !== '/login') {                if (to.matched.length === 0) {                    // 如果匹配到的路由形如 https://172.24.1.117/?id=xxx&name=xxx,表明是关联跳转时没有权限,跳转到403                    next({ path: '/403' });                } else if (queryChange) {                    // 跳转之前将路由中查询字符串为空的过滤掉,如 xxx.com?page=&size= 这种                    next({ name: to.name, params: to.params, query: to.query });                } else if (sessionStorage.isSysLock === 'true' && to.path !== '/sys-lock') {                    next({ path: '/sys-lock' });                } else {                    next();                }            } else {                // 1.如果用户手动在地址栏输入 /login,重定向到之前的路由页                // next(from.fullPath);                // 2.如果用户手动在地址栏输入 /login,清除token并刷新页面,就会去到登录页                store.commit('goToLogin');            }        }    }});

    (1)当用户打开 localhost,此时还没有 token,匹配的是空路由,我们重定向到登录页 next({ path: '/login' });(2)用户在登录页刷新页面,也会进入路由拦截,此时匹配的是 login 路由,而 login 路由是不需要登录验证的(requiresAuth 为空或者 false),所以直接跳过执行 next();(3)用户在登录页输入了用户名和密码,登录成功,保存了 token,跳转到 /home 路由;(4)此时进入路由拦截,已经有 token了,但是还没有用户权限 permissionList,然后发请求获取用户权限列表,得到权限后 next({ path: to.path, query: to.query }); 继续往下走;(5)再次进入路由拦截,此时有 token 和 permissionList 了,就可以根据实际业务进行跳转了。上面的代码是判断当前是不是 login 路由,如果用户登录后手动在地址栏输入 /login,则清除 token 跳转到登录页。其他的逻辑就跟具体业务相关了,就不细讲了。

    4、处理用户权限

    处理用户权限,在 store.js 定义一个模块 permission.js,专门用于处理用户权限相关的逻辑,用户权限列表、菜单列表都保存在此模块;来看看 permission.js 主要做了什么:

    /* permission.js *//* 由于权限这块逻辑很多,所以在vuex添加了一个permission模块来处理权限相关的逻辑和变量 */import httpRequest from '@/assets/js/service/http'; // http请求import handleModule from '@/assets/js/common/handle-module'; // 处理路由、侧边栏的公共函数import router, { dynamicRoutes } from '@/router/index'; // 默认路由配置,动态路由配置import permissionRouter from '@/router/router'; // 需要权限的路由配置// ...export default {    // ...    actions: {        async FETCH_PERMISSION({ commit, state }) {            // 初始化路由表,注意这里必须写,router.beforeEach 路由拦截时,多次执行 FETCH_PERMISSION            commit('setPermission', []);            // 发请求获取后端返回的用户权限            let data = await getUserByToken();            let userPopedoms = data.userPopedoms || [];            // 保存用户的权限模块(去除掉用户管理和登录),用户管理模块可以使用,权限列表            let userPopeList = userPopedoms.filter(v => v.requestMapping !== 'user-manage' && v.requestMapping !== 'login');            commit('setUserPopedoms', userPopeList);            // 根据权限筛选出我们设置好的路由并加入到 path='/' 的children,就是home路由的children下            let routes = handleModule.getRouter(userPopedoms, permissionRouter);            let homeContainer = dynamicRoutes.find(v => v.path === '/');            // 使用concat的目的是让 分配给用户的权限处于 children 的第0项            homeContainer.children = routes.concat(homeContainer.children);            // 设置首页重定向,重定向到用户权限的第0项            homeContainer.redirect = homeContainer.children[0].name;            // 根据权限生成左侧导航菜单            let sidebarMenu = handleModule.getSidebarMenu(userPopeList);            commit('setMenu', sidebarMenu);            // 初始路由            let initialRoutes = router.options.routes;            // 动态添加路由。只有刷新页面才会清空动态添加的路由信息            router.addRoutes(dynamicRoutes);            // 完整的路由表            commit('setPermission', [...initialRoutes, ...dynamicRoutes]);        }    },};

    (1)首先,let data = await getUserByToken(); 发请求获取用户权限,得到 data,data.userPopedoms 格式大致如下:

    [  {    "moduleGroupId": 1001,    "moduleGroupName": "部署管理",    "requestMapping": "deploy-manage",  },  {    "moduleGroupId": 1100,    "moduleGroupName": "系统管理",    "requestMapping": "sys-manage",    "moduleList": [      {        "moduleId": 1101,        "moduleName": "系统日志",        "requestMapping": "system-log",        "moduleGroupId": 1100,      },      {        "moduleId": 1102,        "moduleName": "系统告警",        "requestMapping": "sys-alert",        "moduleGroupId": 1100,      },    ],  }]

    (2)然后,根据我们写好的路由数组,进行对比,过滤得到我们要的路由。路由格式在上文“路由定义”的 router/router.js 已经提到。还要根据用户权限处理得到侧边栏菜单。

    为此,我们需要两个处理函数,一个根据用户权限列表和路由数组过滤得到最终路由,另一个根据用户权限处理得到侧边栏菜单。所以另外专门创建了一个文件 handle-module.js 存放这两个函数。

    /* handle-module.js */const handleModule = {    /**     * 根据后台返回的权限,以及配置好的所有路由,过滤出真实路由     * @param  {Array} permissionList 后台返回的用户权限列表     * @param  {Array} allRouter  前端配置好的所有动态路由的集合     * @return {Array} 过滤后的路由     */    getRouter(permissionList = [], allRouter = []) {        // permissions 的格式为 ["deploy-manage", "system-log"]        let permissions = permissionList.reduce((acc, cur) => {            if (cur.moduleList && cur.moduleList.length > 0) cur = cur.moduleList;            return acc.concat(cur);        }, []).map(v => v.requestMapping);        return allRouter.filter(item => permissions.includes(item.meta.permitName));    },    /**     * 根据后台返回的权限,生成侧边栏     * @param  {Array} permissionList  后台返回的用户权限列表     * @return {Array} sidebarMenu  生成的侧边栏数组     */    getSidebarMenu(permissionList = []) {        let sidebarMenu = [];        permissionList.forEach(item => {            let menuItem = {                name: item.requestMapping,                title: item.moduleGroupName,            };            menuItem.children = (item.moduleList || []).map(child => ({                name: child.requestMapping,                title: child.moduleName,            }));            sidebarMenu.push(menuItem);        });        return sidebarMenu;    }};export default handleModule;

    (3)上面得到过滤后的路由数组后,加入到 path 为 '/' 的 children 下面

    {        path: '/',        name: 'home',        component: () => import('@/views/home.vue'),        meta: {            requiresAuth: true,        },        children: [            /* 将上面得到的路由加入到这里 */            // 用户信息            {                path: '/user-info',                name: 'user-info',                component: () => import('@/views/user-setting/user-info.vue'),            },        ]}

    (4)上面根据权限生成侧边栏菜单之后,保存在 store 待用。

    (5)上面第三步将动态路由加入到 home 的 children 之后,就可以将 dynamicRoutes 加入到路由中了。router.addRoutes(dynamicRoutes);

    (6)到了这里,路由就添加完了,也就是 FETCH_PERMISSION 操作完毕了,就可以在 action.then 里面调用 next({ path: to.path, query: to.query }); 进去路由,也就是进入 home。我们上面已经将 home 路由重定向为菜单的第一个路由信息,所以会进入系统菜单的第一个页面。

    刷新页面后,根据 router.beforeEach 的判断,有 token 但是没有 permissionList ,会重新触发 action 去发请求获取用户权限,之前的逻辑会重新走一遍,所以没有问题。

    退出登录后,需要清除 token 并刷新页面。因为是通过 addRoutes 添加路由的,而 vue-router 没有删除路由的 api,所以清除路由、清除 store 中存储的各种信息,刷新页面是最保险的。

    相关文件的目录截图:

    2c2e4616c9135fd496a0193c6bc23574.png

    四、总结

    缺点:全局路由守卫里,每次路由跳转都要做判断;每次刷新页面,需要重新发请求获取用户权限;退出登录时,需要刷新一次页面将动态添加的路由以及权限信息清空;

    优点:菜单与路由分离,菜单的修改、添加、删除由后端控制,利于后期维护;使用 addRoutes 动态挂载路由,可控制用户不能在 url 输入相关地址进行跳转;

    vue权限管理还有其他实现方式,大家可以根据实际业务考虑做调整,以上的实现方式是比较适合我们现有项目的需求的。以上,有问题欢迎提出交流,喜欢的话点个赞哦~

    推荐Vue学习资料文章:

    《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》

    《【新消息】Vue 3.0 Beta 版本发布,你还学的动么?》

    《Vue真是太好了 壹万多字的Vue知识点 超详细!》

    《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》

    《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》

    《手把手教你深入浅出vue-cli3升级vue-cli4的方法》

    《Vue 3.0 Beta 和React 开发者分别杠上了》

    《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》

    《Vue3 尝鲜》

    《总结Vue组件的通信》

    《手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】》

    《Vue 开源项目 TOP45》

    《2020 年,Vue 受欢迎程度是否会超过 React?》

    《尤雨溪:Vue 3.0的设计原则》

    《使用vue实现HTML页面生成图片》

    《实现全栈收银系统(Node+Vue)(上)》

    《实现全栈收银系统(Node+Vue)(下)》

    《vue引入原生高德地图》

    《Vue合理配置WebSocket并实现群聊》

    《多年vue项目实战经验汇总》

    《vue之将echart封装为组件》

    《基于 Vue 的两层吸顶踩坑总结》

    《Vue插件总结【前端开发必备】》

    《Vue 开发必须知道的 36 个技巧【近1W字】》

    《构建大型 Vue.js 项目的10条建议》

    《深入理解vue中的slot与slot-scope》

    《手把手教你Vue解析pdf(base64)转图片【实践】》

    《使用vue+node搭建前端异常监控系统》

    《推荐 8 个漂亮的 vue.js 进度条组件》

    《基于Vue实现拖拽升级(九宫格拖拽)》

    《手摸手,带你用vue撸后台 系列二(登录权限篇)》

    《手摸手,带你用vue撸后台 系列三(实战篇)》

    《前端框架用vue还是react?清晰对比两者差异》

    《Vue组件间通信几种方式,你用哪种?【实践】》

    《浅析 React / Vue 跨端渲染原理与实现》

    《10个Vue开发技巧助力成为更好的工程师》

    《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》

    《1W字长文+多图,带你了解vue的双向数据绑定源码实现》

    《深入浅出Vue3 的响应式和以前的区别到底在哪里?【实践】》

    《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》

    《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》

    《手把手教你D3.js 实现数据可视化极速上手到Vue应用》

    《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【上】》

    《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【中】》

    《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】》

    作者:lxcan

    转发链接:https://segmentfault.com/a/1190000022431839

    展开全文
  • Vue.js学习第十二天——动态路由、懒加载、嵌套路由及传递参数相关 一. 动态路由 背景:有时候当我们在访问某些页面的时候,一个页面的path路径可能是不确定的,比如会有这样一个场景:我们在用户登录的时候,我们...

    Vue.js学习第十二天——动态路由、懒加载、嵌套路由及传递参数相关

    . 动态路由

    • 背景:有时候当我们在访问某些页面的时候,一个页面的path路径可能是不确定的,比如会有这样一个场景:我们在用户登录的时候,我们希望它的路径不是一个固定的,例如 www.xxx.com/user,我们希望后面跟着用户的id,类似这样www.xxx.com/user/beanBag,这样的需求我们怎么实现呢?
    • 使用: 1. 创建用户组件 user.vue
      1. 建立路由映射关系(userId指待会儿传进来的值)

        {
            path: '/user/:userId',
            component: user
        }
        
      2. 绑定router-link中的to属性
        <router-link v-bind:to="'/user/'+userId">用户</router-link>

      3. 在data中传入数据

        export default {
          name: 'App',
          data() {
            return {
              userId: 'beanBag'
            }
          }
        }
        

    . 路由懒加载

    • 背景:当我们打包构建应用时,JavaScript包会变得非常大,影响页面加载,所以必须由一种方法来提升用户体验
    • 了解: 在我们打包好的Js文件中我们会发现有三个文件,分别是app、manifest和vendor,这三个Js文件分别负责我们的业务代码、为打包代码做底层支撑以及第三方的一些代码(vue,axios…)app中将我们的不同文件作为数组的参数传入相关函数中处理,所以如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应组件,这样就能解决此问题
    • 使用: 1. 结合Vue的异步组件和Webpack的代码
      1. AMD写法
      2. ES6写法(推荐使用)
        const index = () => import('../components/index.vue'); //导入的时候就指定为懒加载

    . 嵌套路由

    • 背景:当我们访问一个页面的时候,这个页面中有很多小的页面,倘若我们向以前一样配置映射关系,那么所有的路径都会是处于同一级别,不利于我们的管理,如果能够在大的路径下划分小的路径,就能方便我们的管理

    • 使用: 1. 创建两个组件indexNews.vue和indexMessage.vue这两个组件是index界面下的两个子组件;

      1. 配置映射关系:

        {
            path: '/home',
            component: index,
            children: [
                {
                    path: 'message',
                    component: indexMessage
                },
                {
                    path: 'news',
                    component: indexNews
                }
            ]
        },
        
      2. index.vue中创建这两个文件的入口

        <router-link to='/home/news'>新闻</router-link>
        <router-link to='/home/message'>消息</router-link>
        <router-view></router-view>
        
    • 拓展:为嵌套路由添加默认路径,在children中添加默认路由的配置即可

    {
      path: '/home',
      component: index,
      children: [
          {
              path: '',
              redirect: 'message'
          },
          {
              path: 'message',
              component: indexMessage
          },
          {
              path: 'news',
              component: indexNews
          }
      ]
    },
    

    . 传递参数

    • 使用:有 paramsquery 两种类型的传递方式
    • 比较
    类型 params query
    配置路由格式 /router/:id /router(一般配置)
    传递方式 在path后面跟上对应的值 对象中使用query的key作为传递方式
    传递后形成的路径 /router/beanBag /router?id=beanBag
    使用场景 数据传递较少 数据传递较多
    • query方式的使用
      1. 创建profile组件

      2. 配置路由映射关系

      3. 在APP.vue中创建一个button(或者直接rputer-link标签),button监听点击事件profileClick方法,在方法中写相关代码传入参数

        methods: {
            profileClick(){
              this.$router.push({
                path: '/profile',
                query: {
                  name: 'beanBag',
                  age:18
                }
              })
            }
          }
        
      4. 在profile.vue界面中使用参数

        <template>
          <div>
              <h3>我是profile组件</h3>
              <p>{{$route.query.name}}</p>
              <p>{{$route.query.age}}</p>
          </div>
        </template>
        

    要注意,在使用代码方式进行路由跳转的时候使用的是$router,在拿到传入数据时使用的是$route$router对象是vue-router中的一个实例,在整个vue-router实例中都会存在,而$route只有在处于活跃路由时才会存在于对应的那个路由

    展开全文
  • vue如何根据后端返回的路由数据生成导航根据不同的路由生成不同的导航,也叫做vue动态路由。vue项目实现动态路由的方式大体可分为两种:前端控制路由:前端这边把路由写好,登录的时候根据用户的角色权限来动态展示...
  • 每个页面展示的都是一个组件,通过各个组件组成了应用程序,但是我们怎么找到对应的组件,这时候路由就发挥了作用,将组件映射到路由里,然后告诉Vue Router在哪里渲染。 单页面点击切换的是组件,如何实现组件切换...
  • 这篇文章主要介绍了关于如何在Vue项目中添加动态浏览器头部title的问题,有着一定的参考... 实现思路( 1 ) 从路由router里面得到组件的title( 2 ) title存vuex (本项目已经封装h5的sessionStorage和localStorage也...
  • 上一次给大家简单说了下什么是动态路由现在我们来讲讲嵌套路由。 GitHub:https://github.com/Ewall1106/mall 1.嵌套路由的使用场景是什么呢? 大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的...
  • A页面->B页面,B页面刷新 B页面->...我们使用vuex结合路由守卫可以达到此效果,下面来看看怎么完美实现这个需求吧…… 1.App.vue <template> <div id="app"> <keep-alive :include="KEEPALIV
  • 引言Laravel程序上下文内,我们需要动态地获取当前的路由地址,应该怎么写呢? 本文就通过从 Laravel 4 到 5 及以上版本的实现方法,带大家重温这一知识点。学习时间在 Laravel 4 中你可以使用系统提供的 Route 对象...
  • 怎么总是给我这个只学了一个月vue的人提些奇怪的要求? 要求:前端页面跳转时,通过路由地址区别,请求后端不同接口,后端接口返回相应组件的vue文件地址,前端根据这个(些)地址加载对应组件到前端 主要用到的就是...
  • 动态路由实现权限控制,初始路由可自定义,根据用户的类型查询对应的权限,然后addRoutes,页面刷新时将路由路径存入sessionStorage中 实现方案 // 初始路由文件 import Vue from 'vue' import Router from 'vue-...
  • 一、前言 最近在自己瞎搞后台系统,自己也简单的搞了一个简陋的后台框架。大家都说不要重复造轮子,所以我在简单了解了原理之后,在GitHub上找到了后台用的...在刚开始学习vue的时候,就简单接触过vue路由router,在
  • Vue-Router

    2021-01-26 15:50:05
    一、vue-router 怎么实现动态注册路由vue-Router 官方文档中 router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 注意:这里的routes选项一定不能重复,否则...
  • 2. 项目默认使用的最严格的eslint校验规范(plugin:vue/recommended),使用之前建议配置开发工具实现自动修复(建议使用vscode开发) 3. 项目使用的是要求最宽泛的MIT开源协议,保留MIT开源协议即可免费商用 适合...
  • Vue 使用 Ant-d 简单实现左侧菜单栏和面包屑功能 好早就写了个案例,但是一直没时间整理,其实代码敲出来是一种学习,记录下来又是另一种学习,好好学习,天天向上!我爱学习! 我这边的左侧菜单栏是写死的,不是...
  • Vue经典题

    2021-04-21 19:37:25
    1Vue实现数据双向绑定的原理是什么? 是通过Object.defineProperty()来实现数据劫持 数据劫持和发布-订阅者功能来实现;...2怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 在router目录下的i
  • 它使用了最新的前端技术栈,内置了i18国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。最大程度上帮助个人,企业节省时间成本和费用...
  • vue的常见理论知识

    2019-02-20 10:48:59
    1. active-class是哪个组件的属性?嵌套路由怎么定义? active-class是vue-router模块的...2. 怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 一个参数 对path属性加上/:参数名 获取: $route.para...
  • 面试必问之【vue】篇

    千次阅读 2018-11-19 08:38:59
    什么MVVM ,vue生命周期,watch computed...vue-router使用及原理,路由嵌套怎么用,动态路由,导航钩子 vuex使用以及原理,多个store或者说store划分 axios是什么?怎么使用? Vue 不支持 IE8 及以下版本,因为 Vue...
  • VUE常用方法整理.pdf

    2020-03-28 22:56:18
    3、动态路由 27 4、嵌套路由 27 5、导航守卫 27 6、路由懒加载 28 第5节 状态管理中⼼—vuex的基础⽤法(官方文档,非常好用) 28  State 28  Mutations 28  Actions 28  vuex⾥包含的基本参数 28  还有别...
  • 2. v-model 是怎么实现的 3. nextTick 的实现原理 4. Vue 表单验证 5. slot 的实现原理 6. Vue 常用的指令 7. key的作用是什么 8. 动态组件和异步组件 9. 组件间通信的方式 10. 更新数据组件不更新的情况 11. 触发...
  • 1、后台模板,模板功能怎么实现,之前都是嵌套iframe,现在怎么处理呢?研究了两天,发现这里的控制使用子路由实现,vue路由跳转时,跳转到子路由会保留父路由的页面内容。 2、从网上下载了很多代码,都没跑起来,...
  • 项目是越写越多,遇到的各种需求当然也逐渐增多。 在一个项目中,实现用户权限,似乎也成了必然。 一直以来,我也知道可以通过vue-router官方提供...动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数
  • vue-element-admin撸后台实践(一)

    千次阅读 2019-02-28 16:13:28
    vue-element-admin将路由和左边侧栏进行了绑定,所以我们要解决的就是根据不同的role,生成不同的路由,然后动态渲染不同的侧边栏,同时还要解决在后台可以通过tree控件动态设置权限的效果,所以,先撸一下整体实现...

空空如也

空空如也

1 2 3
收藏数 42
精华内容 16
关键字:

vue动态路由怎么实现

vue 订阅