vue路由的配置和页面切换详解
1.vue路由
可以实现单页面应用。
路由三要素:
vue路由通过hash的变化切换页面(组件/div)
<router-link>导航
<router-view>存储页面(组件)的容器
src/router/index.js路由的配置
实现步骤:
2.router配置
对router文件夹下的index.js进行配置
path:url
name:对应的参数的模块名称
component:组件名
用组件时一定要注册
{ path: '/product', name: 'Product', component: Product }
3.实现传参配置
配置
{ path: '/product/:id', name: 'Product', component: Product }
切换: <router-link to="/product/666">
产品666</router-link>
接收: {{$route.params.id}}
4 子页面
配置
{ path: '/admin', name: 'Admin', component: Admin, children:[ {path:"ucenter",component:Ucenter}, {path:"activity",component:Activity}, {path:"",redirect:"ucenter"}//重定向 ] },
重定向: {path:"",redirect:"ucenter"}
创建新的别名: alias:["/home","/main"]
切换: <router-link to="/admin/ucenter"></router-link>
5 页面切换
跳转:$router.go(-1)
后退:$router.back()
前进: ```$router.forward()``
新加历史记录切换页面:$router.push()
替换当前页面(不留历史记录):$router.replace()
总结
到此这篇关于vue路由的配置和页面切换的文章就介绍到这了,更多相关vue路由的配置和页面切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefin
这篇文章主要介绍了ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08修改el-form-item中的label里面的字体边距或者大小问题
这篇文章主要介绍了修改el-form-item中的label里面的字体边距或者大小问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论