1.前言
不同的路由方式,都需要所了解,这样在实际使用中才能比较灵活
虽然其实我在工作中甚少用到编程式导航
正好借此机会梳理一下
2.router实例方法跳转
之前是通过
router-link创建a标签来定义导航链接
语法
router.push(location, onComplete?, onAbort?)
使用
this.$router.push()
这个方法会向
history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL当你点击
时，这个方法会在内部调用，所以说，点击等同于调用router.push(...)
3.具体使用方式
直接脚手架 选择带
vue-router创建项目
字符串 路径
router里面配置的 path
this.$router.push("boy")
对象
router里面配置的 path
this.$router.push({path:"boy"})
命名路由 带参数
router里面配置的 path
this.$router.push({name:"Boy",params:{userId:'123'}})
path 不能带 参数 params会被忽略
this.$router.push({path:"boy",params:{userId:'123'}})
path 配合 query
地址栏会拼接上 boy?userId=123
this.$router.push({path:"boy",query:{userId:'123'}})
直接 path
this.$router.push({path:`boy/${userId}`})
注意路由配置 需要配置下 传参
{ path: '/boy/:userId', name: 'Boy', component: () => import( '@/views/boy.vue') },
获取路由信息
在目标界面获取 比如
boy.vue
created(){ console.log("----------路由",this.$route); }
4. router.replace()
router.replace(location, onComplete?, onAbort?)
跟
router.push很像，唯一的不同就是，它不会向history添加新记录，而是跟它的方法名一样 —— 替换掉当前的history记录。
5.router.go(n)
这个方法的参数是一个整数，意思是在
history记录中向前或者后退多少步，类似window.history.go(n)。
// 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用，那就默默地失败呗 router.go(-100) router.go(100)
6. 404界面配置
- 默认会去找index文件
所以'@/views/NotFound/index.vue 可以省略index.vuepath:'*'中*
就是简单的正则 为通配符，匹配所有路径
redirect:重定向到404页面
必须将此路由配置放到最后，否则无法实现该功能
{ path:'/404', name:"404", component: () => import( '@/views/NotFound') }, { path:'*', redirect:{ name:"404" } }
7. 嵌套路由配置
以
/开头的嵌套路径会被当作根路径子路由不加
/会自己拼接一级路由建议 最好加个
**/**
{ path: 'two', name: 'Two', component: () => import( '@/views/day/two.vue'), redirect:"level31", children:[ { // 浏览器地址显示 #/level31 path:"/level31", component: {render(h){ return h("h1","前端")}} }, { // 浏览器地址 显示#/two/level32 path:"level32", name:"name32", component: {render(h){ return h("h1","后端")}} }, { // 想显示路由层级 也可以写完整的地址 path:"/two/level33", name:"name33", component: {render(h){ return h("h1","测试")}} }, { path:"/two/level34", component: {render(h){ return h("h1","UI")}} } ] },
8.路由跳转 two界面
注意不管是几级路由 跳转的时候用命名路由自己会去拼接路径
<ul> <li> <router-link to="/level31">前端</router-link> </li> <li> <router-link :to="{name:'name32'}">后端</router-link> </li> <li> <router-link :to="{name:'name33'}">测试</router-link> </li> <li> <router-link to="/two/level34">UI</router-link> </li> </ul> <router-view></router-view>
9. 问题
另外大家可能 也发现个问题,路由切换的时候如果 在
created里面发请求,只会走一次created,那是因为因为效率问题,复用了这个组件,所有没有进行重新创建,怎么解决呢,且听下篇文章分解vue路由-3监听-守卫
10.后记
其实官方文档写的非常清楚,还是建议 看看官网, 我这水平只能做到抛砖引玉,尽量做好 一块好砖的工作
