1.前言
不同的路由方式,都需要所了解,这样在实际使用中才能比较灵活
虽然其实我在工作中甚少用到编程式导航
正好借此机会梳理一下
2.router实例方法跳转
之前是通过
router-link创建a标签来定义导航链接
语法
router.push(location, onComplete?, onAbort?)
使用
this.$router.push()
这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL
当你点击
<router-link>时，这个方法会在内部调用，所以说，点击<router-link :to="...">等同于调用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.vue
path:'*'中*
就是简单的正则 为通配符，匹配所有路径
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.后记
其实官方文档写的非常清楚,还是建议 看看官网, 我这水平只能做到抛砖引玉,尽量做好 一块好砖的工作
