vue-router怎么动态配置，比如根据用户权限不同显示路由 为什么使用Vue动态路由
vue-router怎么动态配置，比如根据用户权限不同显示路由
1、vue-router怎么动态配置，比如根据用户权限不同显示路由
如上图，我想根据用户权限不同，动态添加删除菜单
下面是路由配置
const routes = [
{
path: /,
component: Home,
name: 系统管理,
iconCls: el-icon-setting,
children: [
{ path: /Page12, component: Page12, name: 组织机构 },
{ path: /Page9, component: Page9, name: 管理员 },
{ path: /Page11, component: Page11, name: 用户管理 },
{ path: /Page7, component: Page7, name: 用户反馈 },
{ path: /Page6, component: Page6, name: 关于我们 },
{ path: /Page8, component: Page8, name: 联系我们 },
{ path: /Page10, component: Page10, name: 个人中心 }
]
}
]
1月20日提问
评论
邀请回答
编辑
查看全部 2 个回答
答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问
路由就是按照你这样配置的，然后你的菜单单独配置：放在store里面，根据用户权限配置菜单。如果更进一步，可以配置accessMenu,就好像这样
router.beforeEach ((to, from, next) => {
let accessMenu = store.state.env.accessMenu
let hasLogin = store.state.env.haslogin
if (to.name === login) {
next()
} else {
if (accessMenu.length === 0 || hasLogin === false) {
// 跳转到登录页
next({name: login})
} else {
if (to.name === home) {
next()
} else {
// 查看路径是否在允许的路由内
const toName = to.name
console.log(toName)
if (!toName) {
next({name: home})
} else {
let canGo = findName(toName,accessMenu)
console.log(canGo)
if (canGo) {
next()
} else {
next({name: home})
为什么使用Vue动态路由
项目构建使用官方vue-cli,由于项目较小，使用simple模板。在2.0中路由不再使用router.start()而路由跳转得组件也有所变化，官方文档很全面。有一点不是很懂，就是关于路由的挂载，本来准备另外写个router.js来挂载路由，可是不太好使，所以全都放在了main.js中。在首页有页面切换但是并不涉及路由，这里使用了动态组件，并且使用缓存
Vue.js 2.0 vue-router怎么设置路由
在用vue-cli脚手架生成项目之后，在app.vue和main.js里面简单修改一下，用来测试路由的连通性，具体代码把官网上的抄下来就可以
按照官网上的代码启动不成功的原因就是，在项目挂载的时候少了一个render，我也只是菜鸟，目前只知道这样子，具体的原因俺也不懂。
vue路由里面的to能动态循环添加吗
比如你有好几个一级路由，其中一个是用户个人中心。个人中心里有个左侧边栏作为菜单，点击不同内容时，右侧对应内容改变。你希望个人中心中的每项操作都对应一个路由的话，就可以把右侧作为一个sub router-view，对应的也就是嵌套路由。
vue router-link-active
router-link 标签 在选中的时候 会自动给整个标签添加一个 router-link-active的class 你可以根据这个class 设置他的样式。 如果再选中 其他的。 这个class 就会消失 。 从而样式也就会消失
你的router-link-active 不应该在span 上 而是在 router-link 上
css 上 应该写成 .router-link-active>span {} 而不是.router-link-active {}
vue怎么给路由切换时添加动画
1、setInterval事件和组件的生命周期没有直接关系。
2、setInterval会返回一个ID 值。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
vue.js 使用vue-router的动态路由时，为什么刷新就没了那个组件了
先是入口点main.jsimportAppfrom./components/App.vuerouter.start(App,#app)然后在App.vue也就是根组件里面声明router-view