美文网首页
Vue.js路由

Vue.js路由

作者: 西兰花伟大炮 | 来源:发表于2018-01-17 20:27 被阅读58次
image.png
(1)路由模式的选择
image.png

默认是hash


(2)动态路由

也就是改变路由的时候向url传递参数,通过参数名跟具体值的方式


  1. 在router/index.js里面添加路由信息

image.png
  1. 在userinfo.vue里面获取路由传递的值


    image.png
  2. 按照默认Hash模式输入url


    image.png

  1. 得到页面效果



(3)路由的懒加载

用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效


image.png
导航钩子

路由跳转的回退参数失效


image.png
(5)路由跳转后数据的获取
image.png
(6)打印路由信息?

必须得在.vue的文件里才能获取
this.$router.options.routes
前端进行权限管理不是为了安全,是为了用户体验

相关文章

  • 大牛技术分享

    vue.js router--路由

  • Vue.js 路由

    本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过...

  • Vue-router

    Vue路由详解 一、Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,...

  • 2018-09-26

    一、 路由Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页W...

  • 路由、路由的嵌套、路由传参、axios

    一、 路由Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页W...

  • 路由、路由的嵌套、路由传参、axios

    一、 路由Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页W...

  • vue路由

    [vue路由的使用] ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单...

  • Vue学习笔记之路由(二)

    vue路由的使用 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页...

  • Vue.js路由router

    一、Vue.js简介 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现...

  • #前端开发工程师

    Vue.js路由 @(示例)[帮助] 简介 HTML代码 js代码

网友评论

      本文标题:Vue.js路由

      本文链接:https://www.haomeiwen.com/subject/lqvcextx.html