路由的嵌套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"}
}
})