千家信息网

vue router有哪些功能

发表于:2024-11-14 作者:千家信息网编辑
千家信息网最后更新 2024年11月14日,这篇文章主要介绍"vue router有哪些功能",在日常操作中,相信很多人在vue router有哪些功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"vue rou
千家信息网最后更新 2024年11月14日vue router有哪些功能

这篇文章主要介绍"vue router有哪些功能",在日常操作中,相信很多人在vue router有哪些功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"vue router有哪些功能"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

  vueRouter是vue.js官方的路由管理器。它和vue.js的核心深度集成,让构建单页面应用变得易如反掌。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

  vueRouter包含的功能有:

  嵌套的路由/视图表

  模块化的、基于组件的路由配置

  路由参数、查询、通配符

  基于vue.js过渡系统的视图过渡效果

  细粒度的导航控制

  带有自动激活的cssclass的链接

  html5历史模式或hash模式,在IE9中自动降级

  自定义的滚动条行为

  vueRouter学习路由有固定的步骤:

  创建组件

  配置路由(组件映射路径)

  创建路由实例对象router

  创建和挂载vue实例,同时使用router配置参数注入路径信息。

  路由跳转部分:router-link是一个组件,该组件用于设置一个导航链接,切换不同的HTML内容(组件),to属性是目标地址,既要显示的内容部分,router-link默认会被渲染成a标签。

  路由出口:路由跳转时匹配的路径对应的组件将渲染到这里。

  代码如下:

  

  

  

  

  

  

  

  

  

   .first{

   width:300px;

   border:3pxsolidred;

   }

   .second{

   width:300px;

   border:3pxsolidblue;

   }

  

  

  

  

  

{{msg}}

  

到此,关于"vue router有哪些功能"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

0