vue路由使用方法,vue里面的路由
本文主要详细介绍vue的路由，路由的本质是一个通信。比如我们在url地址中输入想要访问的url地址后，浏览器就要请求这个url地址对应的资源。这篇文章有一定的参考价值，感兴趣的朋友可以参考一下。
目录
概念介绍Vue路由器Vue路由器的功能使用步骤分类嵌套路由动态路由命名路由编程导航摘要
概念
路由的本质是对应。比如我们在url地址中输入想要访问的url地址后，浏览器就要请求这个url地址对应的资源。
那么url地址和真实资源之间就有了对应关系，也就是路由。
路由分为前端路由和后端路由
1)后端路由由服务器实现，完成资源的分配。
后端路由的性能低于前端路由，接下来主要研究前端路由。
2)前端路由是通过哈希值的变化来实现的(锚链)。
前端路由的基本概念：根据不同的事件显示不同的页面内容，即事件与事件处理函数的对应关系。
前端做的主要是监听事件，分发和执行事件处理函数。
Vue Router
简介
是Vue.js提供的官方路由管理器它是一个比较强大的前端路由器，推荐使用。
Erouter和Vue.js非常兼容，两者一起可以轻松实现SPA(单页web应用)应用的开发。
Erouter依赖于Vue，所以需要先引入Vue，再引入Vue路由器。
Vue Router的特性
支持H5历史模式或哈希模式、嵌套路由、路由参数、编程路由、命名路由、路由导航卫士、路由转换的动画效果、路由的惰性加载和路由的滚动行为。
Vue Router的使用步骤
1.导入js文件
脚本src=lib/vue_2.5.22.js/script
脚本src= lib/vue-router _ 3 . 0 . 2 . js /script
2.添加路由链接：是路由中提供的标签，默认会呈现为标签，to属性默认会呈现为href属性，to属性的值呈现为#开头的hash地址。
路由器链接到=/user 用户/路由器链接
3.添加路线填充位(路线占位符)
路由器视图/路由器视图
4.定义工艺路线组件。
var User={ template: div this is User/div }
5.配置路由规则并创建路由实例。
var myRouter=new VueRouter({
//routes是路由规则的数组。
路线：[
//每个路由规则都是一个对象，至少包含两个属性：路径和组件。
//path表示路由匹配的哈希地址，component表示路由规则对应的要显示的组件对象。
{路径：“/用户”，组件：用户}，
{路径：“/login”，组件：Login}
]
})
6.将路由装载到Vue实例中。
New Vue({ el:#app ，//通过router属性挂载路由对象router:my router })new Vue({
埃尔： #app ，
//通过路由器属性挂载路由对象
路由器：myRouter
})
补充：
路由重定向：您可以通过路由重定向为页面设置默认的公开组件。
将路由规则添加到路由规则中，例如
var myRouter=new VueRouter({
//routes是路由规则的数组。
路线：[
//path设置为/表示页面的初始地址/，redirect表示要重定向的新地址。设置成路线就行了。
{路径：“/”，重定向：“/用户”}，
{路径：“/用户”，组件：用户}，
{路径：“/login”，组件：Login }
]
})
分类
嵌套路由
嵌套路由最关键的代码在于理解子路由的概念：
例如，我们有一个/login路由。
然后，可以在/login下添加子路由，例如：
/登录/帐户
/登录/电话
动态路由
补充：
1.我们可以通过道具接收参数。
2.另一种情况，我们可以将道具设置为对象，然后直接将对象的数据传递给组件使用。
3.如果想得到传递的参数值和传递的对象数据，那么props就要设置成函数。
命名路由
给路线起别名
编程式导航
调用js的api方法实现导航
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。