一.什么是路由?
路径和组件的映射关系
二.为什么使用路由?
(1).前端路由作用:实现业务场景切换
(2).单页面应用(SPA):所在功能在一个html页面上实现
(3)优点:
整体不刷新页面,用户体验更好
数据传递容易,开发效率高
三.关于vue-router
1.介绍:vue-router模块包,它和Vue.js深度集成,可以定义---视图表(映射规则),
提提供2个内置全局组件,声明式导航自动激活的CSS class的链接
2.使用:
1.安装:
npm i vue-router
2.导入路由:
import Find from '../views/find.vue'
import My from '../views/my.vue'
import Part from '../views/part.vue' //引入自己要引入的文件
import VueRouter from 'vue-router'
3.使用路由插件
Vue.use(VueRouter)
4.创建路由规则数组
const routes = [
{
path: "/find",
component: Find
},
{
path: "/my",
component: My
},
{
path: "/part",
component: Part
}
]
5.生成路由对象
const router = new VueRouter({
routes
})
6. 关联到vue实例
new Vue({
router
})
四.2个内置全局组件
1.<router-view></router-view> 的使用
(1)作用: 设置挂载点,也被称为路由占位符 ,用来显示要展示的内容
2.<router-link> </router-link> 声明式导航的使用
(1)它是内置提供的一个组件可以进行高亮效果的显示
(2)to相当于href属性,使用的时候用<router-link> </router-link> 进行包裹注意不要使用#。
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/part">朋友</router-link>
(3)跳转传参
1. 静态传递
(1) 传递: /path?参数名=值
(2) 接收: $route.query.参数名
2. 动态路由
(1):路由规则path上 定义/path/:参数名
(2):to="/path/值"
(3)接收: $route.params.参数名
五.路由重定向
1.为什么要设置重定向?
解决在网页打开的时候,没有一个默认的网页
2.设置的方法
在规则数组里面定义
{
path: "/", 匹配根路径
redirect: '要重定向的路径'
}
六.路由404设置
1.当访问不存在的路径不存在时候,设置一个不存在的页面
2.在规则数组里面配置,位置在数组的最后面进行配置
3.代码
{
path: "*",
component:组件的名字
}
组件里面显示没有找到要显示的内容
七.路由模式的修改
1.两种模式
3.在路由对象里面进行设置mode:"history"
2.代码:
八.路由的嵌套
1.在现有的一级路由下,在嵌套二级路由
2.图示:
3.具体的使用
(1)建立好二级路由的页面
(2) 在对应的一级配置好二级路由关系
(3)在一级页面下也好创建一个挂载点,并设置跳转路径
(4)注意点
如果根路径是/那加不加都没什么区别
如果没有/就需要和一级路径做拼接使用
如果有/就直接访问即可
八.激活类名的区别
(1)router-link-exact----active--url的hash值和href完全匹配
(2)router-link-active-url的hash值包含href路径值匹配
九.路由守卫
1.语法:router.beforeEach((to,from.next)=>{
//路由跳转之前先执行这里,决定是否跳转
})
to:要跳转到的路由(路由对象信息)
from:从哪里跳转的路由(路由对象信息)
next: next()才会让路由正常的跳转切换,next(false)在原地停留
next(”强制修改到另一个路由上去“),注意:如果不调用next,页面停留在原地
2.应用场景:当你要对路由权限判断时
3.代码示例:
// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
if (to.path === "/my" && isLogin === false) {
alert("请登录")
next(false) // 阻止路由跳转
} else {
next() // 正常放行
}
})
新手小白,多多支持