Vue 路由模块入门
1 2 3 4 5 6 7 8 | 1.下载 npm i vue-router -S 2.安装插件Vue.use(VueRouter); 3.创建路由对象 var router = new VueRouter(); 4.配置路由规则 router.addRoutes([路由对象]); 路由对象{path: '锚点值' ,component:要显示的组件} 5.将配置好的路由对象交给Vue 在options中传递-> key叫做 router 6.使用组件 <router-view></router-view> |
-
- 路由的跳转方式
1 2 | 1.通过标签 <router-link to= '/login' ></router-link> 2.通过js控制跳转 this .$router.push({path: '/login' }) |
this.$router.push() 跳转到指定的url,会向history插入新记录
this.$router.replace() 同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。this.$router.go(-1) 常用来做返回,读history里面的记录后退一个;
vue-router中的对象:
$route 路由信息对象,只读对象;
$router 路由操作对象,只写对象 ;
- 路由的传参和取参
1. 查询参
配置(传参) :to="{name:'login',query:{id:loginid}}"
获取(取参) this.$route.query.id
2. 路由参数
配置(传参) :to="{name:'register',params:{id:registerid} }"
配置路由的规则 { name:'detail',path:'/detail/:id'}
获取 this.$route.params.id
:to传参的属性里 params是和name配对的 query和name或path都可以 ;使用路由参数必须要配置路由规则里面配置好参数名,否则刷新页面参数会丢失 ;
-
- 嵌套路由
使用场景:js跳转路由传参和标签传参,路由相同而参数不同时页面不做刷新的问题;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //安装路由插件 Vue.use(VueRouter); //创建路由对象 var router= new VueRouter({ //配置路由对象 routes:[ { path: '' , redirect: '/nav' }, { path: '/nav' , name: 'nav' , component:Nav, //嵌套路由增加这个属性 children:[ //配置嵌套路由 {path: '' ,redirect: '/nav/index' }, {path: 'index' ,name: 'nav.index' ,component:Index}, {path: 'pensonal' ,name: 'nav.pensonal' ,component:Pensonal}, {path: 'message' ,name: 'nav.message' ,component:Message}, {path: 'mine' ,name: 'nav.mine' ,component:Mine}, ] } ] }) |
官方文档:
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 糊涂啊!这个需求居然没想到用时间轮来解决。
· 浅谈为什么我讨厌分布式事务
· 在 .NET 中使用内存映射文件构建高性能的进程间通信队列
· 一个 java 空指针异常的解决过程
· 揭开 SQL Server 和 PostgreSQL 填充因子的神秘面纱
· 15天流量破10万,免费拼图工具的毕业典礼是被抄袭
· 从硬盘爆满到 GitHub 封号,一位前端开发者的开源历险记
· .NET 使用 DocNET 库快速高效的操作 PDF 文档
· 微软又一自动化开源王炸,Selenium 慌了!
· 分享一个 ProHub 风格 logo 生成器