本文详细介绍了 Vue Router 的核心功能，包括路由配置、声明式与编程式导航、路由重定向、路由嵌套、路由守卫及面包屑导航等。通过实际案例展示了如何使用 Vue Router 进行页面间的跳转与数据传递。
目录
一、路由配置
二、声明式导航
1.声明式导航 - 基础使用
本质：vue-router提供的全局组件"router-link"替代a标签
router-link替代a标签
to属性 替代href属性
好处:router-link自带高亮的类名(激活时类名)
<template>
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/part">朋友</router-link>
</div>
<div class="top">
<!-- 7.设置挂载点-当url的hash值路径切换，显示规则里对应的组件到这里 -->
<router-view></router-view>
</div>
</div>
</template>2.声明式导航 -传值
方式一
to="/path?参数名=参数值"
接收：$route.query.参数名
<template>
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/part?name=小传">朋友-小传</router-link>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template><template>
<div>
<p>关注明星</p>
<p>发现精彩</p>
<p>寻找伙伴</p>
<p>加入我们</p>
<p>人名-{{$route.query.name}}</p>
</div>
</template>方式二
(1)路由规则path上定义 /path/:参数名
(2)to='/path/值'
接收：$route.params.参数名
const routes = [
{ path: "/find", component: Find },
{ path: "/my", component: My },
{ path: "/part", component: Part },
{ path: "/part/:username", component: Part },
];<template>
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/part?name=小传">朋友-小传</router-link>
<router-link to="/part/小智">朋友-小智</router-link>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template><template>
<div>
<p>关注明星</p>
<p>发现精彩</p>
<p>寻找伙伴</p>
<p>加入我们</p>
<p>人名-{{$route.query.name}}--{{$route.params.username}}</p>
</div>
</template>三、编程式导航
1.编程式导航 - js方式跳转路由
注意：
虽然用name跳转，但是url的hash值还是切换path路径值
场景：
方便修改：name路由名(在页面上看不见随便定义)
path可以在url的hash值看到(尽量符合组内规范)
方式一：
this.$router.push({path:'路由路径'})
this.$router.push({name:'路由名'})
this.$router.push('路径')
methods: {
btn(targetPath,targetName){
//方式一：path跳转
//方式二：name跳转
this.$router.push({
// path:targetPath
name:targetName
})
// 方式三
// this.$router.push('路径')
}
}方式二：
this.$router.replace('路径')
<template>
<div>
<div class="footer_wrap">
<span @click="$router.replace('/part')">朋友</span>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template>方式三：
this.$router.go('前进或后退几步')
<template>
<div>
<div class="footer_wrap">
<span @click="$router.go(2)">发现音乐</span>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template>注意：path和replace方法的区别
path: 使用push方法跳转到浏览器将会跳转之前的页面路径path记录到历史栈中，点击返回浏览器返回可以直接返回上一级
replace: 使用replace方法跳转，浏览器不会例句跳转之前的页面路径path，点击跳转不会返回到跳转之前的页面
如下代码返回时会跳过【我的音乐】
<template>
<div>
<div class="footer_wrap">
<span @click="$router.go(2)">发现音乐</span>
<span @click="btn('/my','My')">我的音乐</span>
<span @click="$router.replace('/part')">朋友</span>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template>2.编程式导航 - 传参
方式一：
params => $route.params.参数名
方式二：
query => $route.query.参数名
重要：path会自动忽略params
推荐：name+query方式传参
注意：如果当前url上"hash值和?参数"与你要跳转的"hash值和?参数"一致，会导致冗余导航问 题，不会跳转路由
<template>
<div>
<div class="footer_wrap">
<span @click="btn('/find','Find')">发现音乐</span>
<span @click="btn('/my','My')">我的音乐</span>
<span @click="btnOne">朋友-张三</span>
<span @click="btnTwo">朋友-李四</span>
<span @click="btnThree(1)">朋友-李四</span>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template> methods: {
btn(targetPath,targetName){
//方式一：path跳转
//方式二：name跳转
this.$router.push({
// path:targetPath
name:targetName
})
},
btnOne(){
this.$router.push({
name:'Part',
params:{
username:'张三'
}
})
},
btnTwo(){
this.$router.push({
name:'Part',
query:{
name:'李四'
}
})
},
btnThree(id){
this.$router.push(`/part/${id}`)
}
}四、路由重定向
配置路由规则数组
const routes = [
//redirect可以将特定的path路径重定向到指定路径
{
path: "/",
redirect: "/home",
},
.............其他配置
{
path: "/404",
component: () => import("@/views/NotFound"),
},
//path:'*'代表如果用户访问的路径在路由规则数组中都没有配置过，就触发此条配置规则，重定向到404页面
{
path: "*",
redirect: "/404",
},
];五、路由嵌套
const routes = [
{
path: "/", //默认hash值路径
redirect: "/find", //重定向到/find
//浏览器url中#后的路径被变成/find-重新匹配规则
},
{
path: "/find",
name: "Find",
component: Find,
children: [
{
path: "recommend",
component: Recommend,
},
{
path: "ranking",
component: Ranking,
},
{
path: "songList",
component: SongList,
},
],
},
{ path: "/my", name: "My", component: My },
{ path: "/part", name: "Part", component: Part },
//404页面一定要写在数组最后
{ path: "*", component: NotFound },
];<template>
<div>
<!-- <p>推荐</p>
<p>排行榜</p>
<p>歌单</p> -->
<div class="nav_main">
<router-link to="/find/recommend">推荐</router-link>
<router-link to="/find/ranking">排行榜</router-link>
<router-link :to="{path:'/find/songlist',query:{id:10} }">歌单</router-link>
</div>
<div style="1px solid red;">
<router-view></router-view>
</div>
</div>
</template>
六、路由守卫
场景：当你要对路由权限判断时
语法：router.beforeEach((to,from,next)=>{路由跳转之前先执行这个函数，判断是否跳转})
参数1-to:要跳转到的路由(路由对象信息) 目标
参数2-from从哪个路由跳转 来源
参数3-next():只有写next()才会让路由正常跳转切换，next(false)在原地停留,next("强制修改到另一个路由路径上")
注意：如果不调用next,页面停留在原地
meta: { noAuth: true },表示进入此页面不需要验证
const routes = [
//redirect可以将特定的path路径重定向到指定路径
{
path: "/",
redirect: "/home",
},
{
name: "Login",
path: "/login",
component: Login,
meta: { noAuth: true },
},
//首页
{
path: "/home",
component: () => import("@/views/Home"),
meta: { noAuth: true },
},
{
path: "/404",
component: () => import("@/views/NotFound"),
meta: { noAuth: true },
},
.....其他路由配置
{
path: "*",
redirect: "/404",
},
];
// 4. 实例化VueRouter
const router = new VueRouter({
// mode: "history",
routes,
});
router.beforeEach((to, from, next) => {
console.log(to, "====to====");
console.log(from, "====from====");
console.log(next, "====next====");
const flag = localStorage.getItem("LoginFlag");
if (to.meta.noAuth) {
next();
} else {
if (flag === "Login") {
next();
} else {
next("/login");
}
}
});七、面包屑导航
meta: { title: "导航名" }
const routes = [
//redirect可以将特定的path路径重定向到指定路径
{
path: "/",
redirect: "/home",
},
{
name: "Login",
path: "/login",
component: Login,
meta: { noAuth: true },
},
.....其他路由配置
{
path: "/usercenter",
component: () => import("@/views/UserCenter"),
redirect: "/usercenter/welcome",
meta: { title: "用户中心" },
children: [
{
path: "welcome",
component: () => import("@/views/UserCenter/child/welcome.vue"),
meta: { title: "欢迎" },
},
{
path: "information",
component: () => import("@/views/UserCenter/child/Information.vue"),
meta: { title: "我的资料" },
},
{
path: "order",
component: () => import("@/views/UserCenter/child/order.vue"),
meta: { title: "我的订单" },
},
],
},
{
path: "/404",
component: () => import("@/views/NotFound"),
meta: { noAuth: true },
},
//path:'*'代表如果用户访问的路径在路由规则数组中都没有配置过，就触发此条配置规则，重定向到404页面
{
path: "*",
redirect: "/404",
},
];
<div class="pos">
<span>xx，欢迎您！<button>退出</button></span>
<div class="breadcrumb_content">
<span>当前位置：</span>
<Breadcrumb :list="$route.matched" />
</div>
</div>
扫一扫
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
