Vue3 - Router@4.x使用（二）

路由的嵌套children

Home.vue

	<h2>Home</h2>
	<router-link to='/message'>消息 </router-link>
	<router-link to='/shops'>商品</router-link>
	<router-view /> 

router / index.js

	const routes = [
		{
			path:"/home",
			name:"home",
			component:() => import("../pages/Home.vue")
			children:[
				{
						path:"",
						redirect:"/home/message", // 默认重定向
				},
				{
					path:"message",    // 不带 / 了
					component:() => import("../pages/HomeMessage.vue")
				},
				{
					path:"shops/:shopname",    // 传递参数
					component:() => import("../pages/HomeShops.vue")
				}
			]
		}
	]

HomeShops.vue

	import {useRoute} from 'vue-router'
	setup(){
		const route = useRoute();
		route.params.shopname
	}

代码的页面跳转

	<button onclick='jumpToHome">去Home</button>
	
	// 在methods里用法
	methods:{
		jumpToHome(){
			this.$router.push("/home")
			或者
			this.$router.push({
				path:"/home",
				query:{}
			})
		}
	}

setup 里跳转路由

• useRouter 路由router对象

import {useRouter} from 'vue-router'
setup(){
	const router = useRouter();
	router.push("/about")
	router.push({
		path:"/about",
		query:{
			name:"tomato",
			age:18
		}
	})
	router.push({
		path:"/about",
		params:{
			name:"tomato",
			age:18
		}
	})
}

• useRoute 获取路由传递参数
  • query里面的属性值是明文显示在url上的 ，path + query

  http://localhost:8080/home/message?name=tomato&age=18	
  

  • params添加的属性不显示在url上，且要跟name连用，params + path 组合不生效
  • 如果在router> index.js里面定义了，再使用router对象push方法加params的时候，页面url上会显示参数（同名）

router>index.js

```
	 {
        path: "shops/:shopname",
        name:"shops",
        component: () => import("../pages/HomeShops.vue")
      }
```

Home.vue

	setup(){
		const router = useRouter();
		router.push({
			name:"shops",
			params:{
				shopname:"tomato",
				names:"lili"
			}
		})
	}

HomeShops.vue

	setup(){
		const route = useRoute();
		console.log(route.params.shopname) // tomato 页面刷新后不消失
		console.log(route.params.name) // lili 页面刷新后消失
	}

router-link 的v-slot

普通标签

	<router-link to='/home'>
		<strong>首页</strong>
	</router-link>	

组件

	<router-link to='/home'>
		// 放组件
		<nav-bar title='首页' />
	</router-link>	

v-slot属性

• props:href 跳转的链接
• props:route 对象
• props:navigate 导航
• props:isActive 是否当前处于活跃状态（只要一级路由符合就为true）
• props:isExactActive 是否精确的活跃状态(路由完全符合）
• custom 完全自定义，不再被a标签包裹

	<router-link to="/home" v-slot='props' custom>
		<button>{{props.href}}</button>
		<p>{{props.route}}</p>
		<button @click='props.navigate'>导航到哪里</button>
		<span>{{props.isActive}}</span>
	</router-link>

router-view

	<router-view /> 占位
	
	// 动画效果
	<router-view v-slot='{Component}' > 解构的写法
	<router-view v-slot = 'props'>
		<transiton name = "tomato"> // 这里的name 指定了class名字
			<component :is='props.Component'></component>
		</transition>
	</router-view>
	.tomato-enter-from,.tomato-leave-to{
		opacity:0
	}
	.tomato-enter-active,.tomato-leave-active{
		transition:opacity 1s ease;
	}

动态添加路由

	const route = [{...},{...},{...}]
	const router = createRouter({
		route,
		history:createWebHistory()
	})
 
 	const categoryRoute = {
		path:"/category",
		component:() => import("../category.vue")
	}

	// 添加顶级路由
	router.addRoute(categoryRoute)
	
	// 添加二级路有
				   父级路有的name值
	router.addRoute("home",categoryRoute)

动态删除路由

• 添加一个name 相同 的路由，后面的会替换掉前面定义的路由

	router.addRoute({
		path:"/about",
		name:"about",
		component:() => import()
	})

• 通过removeRoute方法，传入路由的名称

	router.removeRoute("name")

路由的其他方法补充

• router.hasRoute() 检查路由是否存在
• router.getRoutes() 获取一个包含所有路由记录的数组

路由导航守卫

• vue-router 提供的导航守卫主要通过跳转或取消守卫导航

导航拦截

router / index.js

• to ： 是一个Route 对象，要跳转的
• from : 是一个Route对象，从哪一个路由 对象过来的
• 返回值
  • false 不回进行导航
  • undefined 或者不写，会进行默认导航
  • 字符串： 路由路径，会跳转到对应的路径
  • 对象，router.push({path:"/login",query:{}})

	router.beforeEach((to,from)=>{
		if(!isLogin){
			return{path:"/login"}
		}
	})