Vue如何做一个左边栏

简介: Vue如何做一个左边栏

要求一-------点击之后能够实现页面跳转,使用router,点击之后跳到指定页面:

第二步:如何实现简易的前端路由

第三步 左侧边栏的正确写法,ul中li套router-link

第四步 实现嵌套路由

第五步 ul中嵌套着li

第六步嵌套路由

第七步,他在设置路由规则的时候,分了两部分,第一部分是头部,另一个主体部分

嵌套路由规则

嵌套路由使用前先导入组件,使用组件的三个步骤

点击之后可以修改

我是不是应该改成子路由的嵌套规则

点击之后会发生改变

用户管理界面怎么生成,把数据生成放在界面上

数据每生成一次生成一个tr行

item in 数组

别忘记了key关键字

数据都渲染好了

绑定一个事件,点击之后进入详情

点了之后就能够跳,怎么跳那,用导航API

导航命令跳转

路由导航

我要接受用户的id

要具体写id的值

这里你传id是几,我传入id就是几

这里有个注意事项,只有在路由规则里才能写:id

在方法里是不能产生冒号的,只能产生值

点详情,点什么,后来出现了新的页面

this.router.………可以得出

给这条路由规则开启props传参

开启之后,这条路由规则就可以用props属性接收路由的值了

接受之后,我们就可以直接使用了,不用什么router接收参数了

动态参数项,:是能够用来路由规则里的,然后我们在做跳转的时候就是把id给传过去,做一下拼接就好了。

相关文章
|
3天前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
3天前
|
JavaScript
|
1天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
2天前
|
JavaScript
vue滚动到页面底部时加载
vue滚动到页面底部时加载
5 1
|
3天前
|
JavaScript 前端开发 网络架构
Vue如何实现页面跳转路由,实现单页面跳转
Vue如何实现页面跳转路由,实现单页面跳转
|
3天前
|
JavaScript
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug
|
2天前
|
JavaScript 前端开发
一个好看的vue admin模板
这是一个关于Vue管理模板的引用,提到了[PanJiaChen](https://github.com/PanJiaChen/vue-admin-template)在GitHub上的`vue-admin-template`项目。该项目是一个前端管理模板,链接指向了详细的资源。页面中还包含了一张图片,但markdown格式中无法直接显示。简而言之,这是关于一个基于Vue的后台管理界面模板的参考信息。
|
2天前
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
6 0
|
2天前
|
JavaScript
vue知识点
vue知识点
5 0
|
3天前
|
JavaScript