注意Vue的router支持动态路径,以 "/:属性名"形式作为当前path字符串中的一部分。这段字符串路由将作为动态路由匹配真实url上响应字符串信息

 
/* 当我们跳转至上面的路由时其对应的路由视图组件User内部就可以通过
 

注意this.$route就是当前vue应用程序所在路由的信息对象

当前浏览器url与路由的path匹配时所渲染的路由组件

 // 动态路径匹配 通过:id获取每一首歌不同的id
 // 路由的懒加载,通过函数的形式,可以让项目中哪些不许一开始就要加载的组件,加载到项目中去
 // 只有浏览器跳转到当前路由时,该路由组件才会加载到项目中去
 // 这样做的好处是减少不必要的加载降低应用加载速度和运行带宽
 

注意在项目开发中应用中不需要一开始就加载的路由组件请使用懒加载

给路由命名,让路由成为具名路由。路由的导航就可以使用name进行跳转。（路由使用location导航时只有具名路由可可以直接接受pramas传参）

重定向路由，当前应用访问导航至该路由时，这个路由会（以替换的形式）自动重定向到redirect指定的新路由

 redirect 支持函数的形式,该函数接收一个参数就是个访问oldpath时生成的location对象

路由的动态匹配一般情况下只能通过,this.$route.params获取动态匹配到的值。当设置props属性后动态匹配到的键值对可以作为组件props直接传递给视图组件，这样大大降低组件的耦合性

 // 动态路径匹配 通过:id获取每一首歌不同的id
 props: ["id"], // 路由动态路径匹配到的键值对会自动传递给当前组件的同名props
 //真实开发中这里要判断数据是否请求成功
 // 把歌曲的数据赋值给data
 

对象props对象形式,就是将对象key作为渲染组件props属性名,value就是对应属性值 (这种写法value不会改变所以传递props都是一些静态属性)

函数props的函数写法接收当前路由信息对象作为参数,该函数会返回一个对象.对象的key就是渲染组件props属性名,value就是对应属性值

路由的别名,可以给一个路由设置多个路径。当访问这些别名路径时都会访问同一个路由组件

嵌套路由，可以给当前路由设置二级路由

路由的独享守卫,当应用将要导航到当前路由时,可以使用该守卫进行一些逻辑运算实现是否阻止本次导航

注意router是路由实例对象里面包含着路由的属性方法,router是路由实例对象里面包含着路由的属性方法, router是路由实例对象里面包含着路由的属性方法,route是当前浏览访问url路由信心对象

编程式导航到指定的路由

编程式替换当前路由导航到新路由

编程式从当前路由history栈的位置前进后退number条

注意当前进/后退的number大于实例路由history栈的长度时,会前进到最后一条或后退到第一条,但是不推荐这样做会引起性能问题造成页面卡顿

编程式从当前路由history栈的位置后退1条

编程式从当前路由history栈的位置前进1条

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

先引入了组件，事先加载好了。然后不管有没有使用都已经存在

只有路由被使用到了才进行加载对应的组件

history ―― 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上(方法可在Router的实例方法中查看)，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

在使用vue-router开发的项目中,一般情况下不同路由之间的切换会将离开的路由组件卸载,进入的路由组件挂载。
这种情况下我们可通过vue的声明周期进行一些页面的逻辑操作。但是如果有些情况下应用为提高用户体验减少卸载频率或者保存离开组件的活跃性，使用keep-alive组件包裹router-view后路由的切换就把会卸载离开的组件了。这时，如果你的组件需要在路由进入或离开时进行一些操作修改组件自身的数据DOM编程等，就不能再依靠vue的生命周期了。这种情况下请使用组件内的路由守卫。

 // 在渲染该组件的对应路由被 confirm 前调用
 // 因为当守卫执行前，组件实例还没被创建
 // 在当前路由改变，但是该组件被复用时调用
 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
 // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 // 导航离开该组件的对应路由时调用
 

注意组件独享的路由守卫方法都包含三个参数 to from next

// 该回调函数接收当前路由组件实例对象作为参数,我们可以通过该参数操作当前组件
 //真实开发中这里要判断数据是否请求成功
 // 把歌曲的数据赋值给data
 

在使用vue-router开发的项目中,一般情况下不同路由之间的切换会将离开的路由组件卸载,进入的路由组件挂载。
这种情况下我们可通过vue的声明周期进行一些页面的逻辑操作。但是如果有些情况下应用为提高用户体验减少卸载频率或者保存离开组件的活跃性，使用keep-alive组件包裹router-view后路由的切换就吧会卸载离开的组件了这时，如果你的组件需要在路由进入或离开时进行一些操作不需要修改组件自身的状态只是判断是否允许本次路由的跳转等。这种情况下请使用路由独享守卫。

案例 登录验证 路由独享守卫配置

 // 因为这个守卫没有任何DOM操作或者对组件自身状态进行读写
 // 这样的守卫就可以作为路由独享守卫
 // 这里吗没有this, next接收一个回调函数,在回调函数中跳转
 // 下面的写法进入了个人页面,又从个人页面重定向到登录,这样可能会造成一些不必要的bug

全局路由守卫,当应用中有多个路由都需要进行相同逻辑的路由守卫判断时,并且该逻辑操作中不需要直接操作组件DOM或组件组件的状态这是就可以使用全局路由守卫(全局守卫最常见的应用就是登陆验证)

// 路由的全局守卫所有的路由跳转,都会调用该守卫
// 全局路由守卫也是Vue router应用中,最适合做登录验证的地方
 // 因为这个守卫没有任何DOM操作或者对组件自身状态进行读写
 // 这样的守卫就可以作为路由独享守卫
 // 这里吗没有this, next接收一个回调函数,在回调函数中跳转
 // 下面的写法进入了个人页面,又从个人页面重定向到登录,这样可能会造成一些不必要的bug

到此这篇关于Vue-Router的routes配置详解的文章就介绍到这了,更多相关Vue-Router routes配置内容请搜索云海天教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持云海天教程！