vue3-router使用(全)
vue3-router使用(全)说明一、定义路由二、导入组件三、 传参四、 守卫五、编程式路由完说明router设计核心是一个路由对应一个组件本教程需要有一定router基础定义路由导入组件传参守卫编程式路由一、定义路由自定义路由{path:......,name:......,component:......}子路由{path:......,children:[{path:......,name
·
说明
router设计核心是一个路由对应一个组件
- 本教程需要有一定router基础
- 定义路由
- 导入组件
- 传参
- 守卫
- 编程式路由
一、定义路由
- 自定义路由
{
path:......,
name:......,
component:......
}
- 子路由
{
path:......,
children:[
{
path:......,
name:......,
component:......
},
......
]
}
注:path相对路径和绝对路径
相对路径:只写字路由
绝对路由:全路由
二、导入组件
- 全局导导入
import ...... from ......
- 惰性导入
()=>import(......)
三、 传参
- 传统传参
- 字符串传参
<router-link to='url?var=value&var=value.......'></router-link>
- 对象传参
router-link to="{
path | name:......, //用path时就是路径,是name时就是定义的路由名
query:{......}
}"
- Rest传参
- 定义 path:“url/:var/:var…”
- <router-link to=“url/value/value…”>
- 对象传参
<router-link :to="{
name:......,//只能用name,不能用path
params:{......}
}">context</router-link>
- 取值(路由对象route)
this.$route.query
this.$route.params
route其它属性
name
path
fullpath
meta
query
params
四、 守卫
注:在根组件index.js中创建
router.beforEach((to,from,next)=>{
to.path //去的路由
from.path //来的路由
next() //下一个函数
next(path) //指向路由
})
五、编程式路由
this.$router.push(path) 指定路由
this.$router.forword() 向前一步
this.$router.back() 向后一步
this.$router.go(n) 向前或向后几步
完
更多推荐
已为社区贡献1条内容
所有评论(0)