官方文档:https://cn.vuejs.org/v2/guide/routing.html
路由:根据url路径展示页面
以前是后端根据前端请求分配渲染页面,现在是由前端的router配置路由,vue是单页面,用户请求转到首页,首页渲染不同组件,达到了单页面渲染不同页面的需求。
router在index.js里配置。
vue-router,动态路由笔记
main.js实例化vue的时候把router传进去就成了。
vue-router,动态路由笔记
app.vue
vue-router,动态路由笔记
怎么拿到url中的get传值
vue-router,动态路由笔记
动态路由匹配:(有很多不同变量要使用同一个模板)
1、index.js中引入路由
vue-router,动态路由笔记
vue-router,动态路由笔记
注册后就能访问了
vue-router,动态路由笔记
除了query外还能:id的方式获取信息,就不用?id=xxx,可以直接/id
vue-router,动态路由笔记
vue-router,动态路由笔记
mounter(){
console.log(this)
}
this中可以直接输出id
vue-router,动态路由笔记
获取id:
vue-router,动态路由笔记
假如要做一个功能:展示不同城市的天气,同一个页面渲染,只是城市不同,可以直接传参作为Path,页面内拿到城市名ajax获取数据渲染。
vue-router,动态路由笔记
beforeMount()渲染之前ajax
我就十万个问号,axios是什么神仙语法糖…太方便了吧??
await直接就等于$ajax中的async:false,同步。
vue-router,动态路由笔记
promise+axios,可以对失败信心做处理。
vue-router,动态路由笔记
多个变量
vue-router,动态路由笔记
嵌套子路由:
vue-router,动态路由笔记
vue-router,动态路由笔记
2、点击跳转,

this.$router.push

vue-router,动态路由笔记
传参:
vue-router,动态路由笔记
vue-router,动态路由笔记
等价两个方法
vue-router,动态路由笔记
3、命名视图
vue-router,动态路由笔记
4、路由元信息
vue-router,动态路由笔记
vue-router,动态路由笔记
5、过渡动效transition
vue-router,动态路由笔记
vue-router,动态路由笔记
过度模式:
vue-router,动态路由笔记

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-10
  • 2022-12-23
  • 2021-03-30
  • 2021-07-15
猜你喜欢
  • 2021-05-31
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-27
  • 2022-12-23
相关资源
相似解决方案