vue3-router使用（全）

说明

router设计核心是一个路由对应一个组件

1. 本教程需要有一定router基础
2. 定义路由
3. 导入组件
4. 传参
5. 守卫
6. 编程式路由

一、定义路由

1. 自定义路由

{
path:......,
name:......,
component:......
}

2. 子路由

{
path:......,
children:[
{
path:......,
name:......,
component:......
},
......
]
}

注：path相对路径和绝对路径
相对路径：只写字路由
绝对路由：全路由

二、导入组件

1. 全局导导入

import ...... from ......

2. 惰性导入

()=>import(......)

三、 传参

1. 传统传参

• 字符串传参

<router-link to='url?var=value&var=value.......'></router-link>

• 对象传参

router-link to="{
	path | name:......, //用path时就是路径，是name时就是定义的路由名
	query:{......}
}"

2. Rest传参

• 定义 path:“url/:var/:var…”
• <router-link to=“url/value/value…”>
• 对象传参

<router-link :to="{
	name:......,//只能用name,不能用path
	params:{......}
}">context</router-link>

3. 取值（路由对象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) 向前或向后几步

完