vue router使用,vue router用法
本文主要介绍Vue-Router的相关信息，Vue-Router是Vue.js的官方路由插件，与Vue.js深度集成，适合构建单页面应用。本文通过示例代码非常详细的介绍了一下，有需要的朋友可以参考一下。
目录
1、router-view2、router-link3、redirect4、Routing Alias 5、Routing Parameters props5.1、Boolean Mode 5.2、Object Mode 5.3、Function Mode 6.1、Routing Guard 6.1、Global Front Guard beforeEach6.2、Global Resolution Guard before resolve 6.3、Global hook afterEach6.4、routing exclusive guard beforeEnter6.5、Guard in the component导航分析过程7、Routing元信息8、过渡动态效果9、滚动行为10、完成路由最近重温了vue family bucket，看了一遍觉得记忆更深了，所以特意做了记录(本文中vue-router的版本是v3.x)。
1，router-view
路由器视图是一个功能组件，用于呈现与路径匹配的视图组件。可以与转换和保持活动一起使用。如果两者一起使用，一定要在内层使用keep-alive。
路由器视图/路由器视图
！-或者-
路由器视图名称= footer /路由器视图
如果路由器视图设置了名称，则将呈现相应路由配置中组件下的相应组件。
2，router-link
Router-link选项卡允许用户在具有路由功能的应用程序中导航(点击)。
属性
类型
解释
到
字符串/对象
路线/目的地位置的对象
替换
布尔代数学体系的
不留导航记录。
附加
布尔代数学体系的
在当前路径后添加路径/a=/a/b。
标签
线
指定要呈现的标签。
活跃阶层
线
激活时使用的类
路由器链接：to= { path:/log in } replace tag= span /路由器链接
3，重定向redirect
根路由重定向到登录。
const router=new VueRouter({
路线：[
{路径：/，重定向：/登录 }
]
})
动态返回重定向目标
const router=new VueRouter({
路线：[
{路径：“/a”，重定向：到={
//该方法接收目标路由作为参数。
//返回重定向的字符串路径/路径对象
}}
]
})
4，路由别名
访问/b时，URL会保持/b，但路由匹配会是/a。
const router=new VueRouter({
路线：[
{路径：“/a”，组件：A，别名：“/b”}
]
})
5，路由传参props
使用props避免与$route过度耦合，这样可以直接使用props接收组件中的参数。
5.1，布尔模式
在route后面写一个参数，将props设置为true。
{
路径：“/vuex/:id”，
名称： Vuex ，
component:()=import( @/view/vuex )，
道具：真的，
大副：{
标题：“vuex”
}
}
设置跳转要传递的参数。
路由器链接：to= {name: vuex ，params:{ id: 9999 } } tag= h1 jump/路由器链接
！-或者-
toNext() {
这个。$router.push({
名称： Vuex ，
参数：{
id:“99999”
}
})
}
在过去的页面里，通过道具或者这个获取参考。$params。
道具：{
id: {
类型：字符串，
默认值：“”
}
}
！-或者-
这个。$params.id
5.2，对象模式
将props设置为route中的对象，以携带静态数据。
{
路径：“/vuex”，
名称： Vuex ，
component:()=import( @/view/vuex )，
道具：{
id:“99999”
},
大副：{
标题：“vuex”
}
}
跳跃
路由器链路：to= {name: vuex} tag= h1 跃点/路由器链路
！-或者-
toNext() {
这个。$router.push({
名称：“Vuex”
})
}
在过去的页面里，通过道具或者这个获取参考。$params。
道具：{
id: {
类型：字符串，
默认值：“”
}
}
！-或者-
这个。$params.id
注意：仅适用于静态数据。
5.3，函数模式
首先，将props设置为在route中起作用，并返回一个对象。查询或参数都可以传递给props。
{
路径：“/vuex”，
名称： Vuex ，
component:()=import( @/view/vuex )，
道具：路线=({
！-查询-
id: route.query.id，
！-参数-
年龄：路由参数年龄
}),
大副：{
标题：“vuex”
}
}
跳跃
路由器链接：to= {name: vuex ，query: {id: 9999}，params:{ age: 20 } } tag= h1 jump/router-link
！-或者-
toNext() {
这个。$router.push({
名称： Vuex ，
查询：{
id:“999999”
},
参数：{
年龄：“20”
}
})
}
过去一页，用道具还是这个。$ route.params/this. $ route . query获取参数。
道具：{
id: {
类型：字符串，
默认值：“”
},
年龄：{
类型：字符串，
默认值：“”
}
}
！-或者-
这个。$route.query
这个。$route.params
6，路由守卫
路由守卫主要用于通过跳转或取消来守卫导航。
6.1，全局前置守卫beforeEach
当一个导航被触发时，全局前卫按创建顺序被调用。防护执行异步解析，导航等待所有防护完成解析。
参数
解释
到
要输入的目的地路线对象
从
导航当前离开的路线。
然后
方法回调
接下来的用法如下
语法
解释
下一个()
转到下一个钩子。
下一步(错误)
中断导航。如果URL已被更改，它将被重置为来自的地址。
下一个(/)
当前中断跳转到另一个地址，可以设置路由对象。
下一步(错误)
终止并将错误传递给onError()
const router=new VueRouter({.})
router.beforeEach((收件人，发件人，下一个)={
//.
})
6.2，全局解析守卫beforeResolve
2.5.0新增，类似于beforeEach，不同的是在确认导航之前，在解析完所有的组件内守卫和异步路由组件之后，才会调用解析守卫。
router.eforeResolve((收件人，发件人，下一个)={
//.
})
6.3，全局后置钩子afterEach
后护板不会接受下一个功能，也不会改变导航本身。
router.afterEach((收件人，发件人)={
//.
})
6.4，路由独享守卫beforeEnter
可以在route配置上直接定义独占的beforeEnter guard，与全局front guard的方法参数相同。
const router=new VueRouter({
路线：[
{
路径：“/foo”，
组件：Foo，
beforeEnter:(收件人，发件人，下一个)={
//.
}
}
]
})
6.5，组件内的守卫
在RouteEnter之前
守卫不能访问这个，因为守卫是在导航被确认之前被调用的，所以即将登场的新组件还没有被创建。您可以通过向next发送回调来访问组件实例。当导航被确认时，回调被执行，组件实例被用作回调方法的参数。
常量页脚={
模板：` 1.`,
beforeRouteEnter(收件人，发件人，下一个){
接下来(虚拟机={
//通过“VM”访问组件实例。
})
}
}
BeforeRouteUpdate (2.2中的新功能)
当当前路由改变，但是组件被复用，并且组件实例可以被访问时调用。
const Foo={
模板：` 1.`,
beforeRouteUpdate(收件人，发件人，下一个){
this.name=to.params.name
下一个()
}
}
beforeRouteLeave
在导航该组件对应的路线时调用，通常用于禁止用户在保存更改前突然离开。您可以按“下一步”取消(false)。
const Foo={
模板：` 1.`,
beforeRouteLeave(收件人、发件人、下一个){
Const answer=window.confirm(您确定要离开吗)
如果(回答){
下一个()
}否则{
下一步(错误)
}
}
}
6.6，完整的导航解析流程
导航被触发。
在停用的组件中调用beforeRouteLeave guard。
在每个守卫之前调用全局。
在重用的组件中调用beforeRouteUpdate guard (2.2)。
在路由配置中输入之前调用。
解析异步路由组件。
在激活的组件中调用beforeRouteEnter。
调用全局beforeResolve保护(2.5)。
导航确认。
调用全局afterEach钩子。
触发DOM更新。
调用beforeRouteEnter guard中传递给next的回调函数，创建的组件实例将作为回调函数的参数传入。
7，路由元信息
定义路由时，您可以配置元对象字段来存储与每条路由对应的信息。通过这个进入。$route.meta，或者通过路由保护中的to.meta和from.meta进行访问。
const router=new VueRouter({
路线：[
{
路径：“/index”，
名称：“索引”，
组件：()=import(@/view/index )，
元：{
标题： 首页，
罗鲁：[管理,老板]
}
}
]
})
8，过渡动效
只需要使用过渡标签包裹住路由器视图标签即可，动画效果可以自己定义，参考过渡组件的用法。也可以在父组件或者app.js中使用看监听$路线变化，根据不同路由替换过渡组件的名字属性，实现不同的动画效。
过渡：name=transitionName
路由器视图/路由器视图
/过渡
监听
观察：{
$route(目的地，出发地){
const toD=to.path.split(/).长度
const fromD=from.path.split(/).长度
this.transitionName=toD fromD？"向右滑动":"向左滑动"
}
}
9，滚动行为
当创建路由器实例时，可以提供一个滚动行为方法，并接收到和从路由对象。第三个参数保存的位置只有通过浏览器的前进/后退按钮触发时才可用。
const router=new VueRouter({
模式："哈希",
路线，
scrollBehavior(to，from，savedPosition) {
if (savedPosition) {
返回新承诺((解决，拒绝)={
setTimeout(()={
解决（保存的位置)
}, 1000)
})
}否则{
返回{ x: 0，y: 0 }
}
}
})
10，完整路由配置
首先导入某视频剪辑软件和某视频剪辑软件路由器，然后使用路由器，定义路由信息集合，每个路由都是一个对象，对象拥有如下属性
属性
类型
值
小路
线
组件路径信息
名字
线
组件命名
成分
功能
组件
伴侣
目标
元信息
孩子们
目标
子路由
再直接的
线
重定向
小道具
布尔/对象/函数
参数传递
具体代码如下：
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
Vue.use(VueRouter)
常量路由=[
{
路径："/",
重定向："/index "
},
{
路径："/index "，
名称："索引",
component:()=import(/* webpackChunkName: index */ @/view/index )，
大副：{
标题： 首页，
验证：错误
}
},
{
路径："/登录"，
名称：登录，
component:()=import(/* webpackChunkName: log in */ @/view/log in )，
元：{
标题： 登录，
验证：错误
},
儿童：[
{
路径："孩子",
姓名：孩子，
component:()=import(/* webpackChunkName: children */ @/view/children )，
大副：{
标题： 嵌套的子路由，
验证：错误
}
}
]
}
]
const router=new VueRouter({
模式："哈希",
路线
})
导出默认路由器
注意：嵌套子路由必须在被嵌套的页面放置路由器视图标签。
总结
到此这篇关于某视频剪辑软件路由器教程的文章就介绍到这了，更多相关某视频剪辑软件路由器手把手教程内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。