首页 / VUE / vue-router路由基础实例分享
vue-router路由基础实例分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue-router路由基础实例分享,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3244字,纯文字阅读大概需要5分钟。
内容图文
![vue-router路由基础实例分享](/upload/InfoBanner/zyjiaocheng/297/687586a697d84a7c83b22f3c13e98c29.jpg)
vue-router 路由基础的详解
今天我总结了一下vue-route基础,vue官方推荐的路由。
一、起步
HTML
创建模板(组件):
(也可以用import 引入外部组件)
组件注入路由:
创建路由实例:
注意这里 routes 没有 ‘ r ' (不要写成 routers)
创建vue实例(并挂载实例)
二、动态路由匹配
有时候我们需要的是模板结构一样,当时数据不一样,就相当于我们要把不同ID的登录用户连接到同一个页面,但要显示每个用户的独立信息,这时我们就用到了动态路由匹配。
动态路由主要用到了全局 $route.params 和路由的动态参数,全局route 的 params API 存储着 路由的所有参数,路径的参数用 “ : ”来标记:
HTML
JS
三、嵌套路由
1.嵌套路由讲的是我们可以在 <router-view>中去在渲染 <router-view> 这时要在配置路由时使用 children
例如:
HTML:
JS:
四、命名路由
1.给路由命名指定路路由跳转,要用到参数name 和 v-bind
HTML:
JS:
五、命名视图
1.给渲染视图 router-view 命名,来制定让那个视图渲染组件
HTML:
JS:
六、重定向 和 别名
重定向 和别名,首先我先来解释一下什么叫做重定向和别名
『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,
『别名』 /a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
重定向主要用参数:redirect 而别名主要用到参数: alias
HTML:
JS:
相关推荐:
vue-router实现tab标签页
基于Vue、Vuex、Vue-router实现动画切换功能
三种Vue-Router来实现组件间跳转
以上就是vue-router路由基础实例分享的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的vue-router路由基础实例分享全部内容,希望文章能够帮你解决vue-router路由基础实例分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。