前端路由单页面
只有一个HTML 页面 所有功能在一个页面上实现
优点:
- 整体不刷新页面,用户体验更好
- 数据传递容易, 开发效率高
缺点: - 开发成本高(需要学习路由)
- 首次加载会比较慢一点。不利于seo搜索引擎优化
依赖路由切换页面
vue-router
本质:是一个第三方包
基本使用:
1.下载vue-router
yarn add vue-router
2.引入 (在main.js中)
import VueRouter from 'vue-router'
3.注册全局组件
// 在vue中,使用使用vue的插件,都需要调用Vue.use()
Vue.use(VueRouter)
4.定义规则数组
const routes = [{
path:"/xxx",
component:xxx
}]
5.生成路由对象
const router = new VueRouter({
routes //routes 是固定key(传入规则数组)
})
6.关联Vue实例对象
new Vue({
router
})
7. 设置挂载点-当url的hash值路径切换,显示规则里对应的组件
<router-view></router-view>
在引用路由时 通过 @/ 用当前 src 的绝对路径引入
import NotFound from '@/views/NotFound'
声名式导航
vue-router 提供了一个全局组件 router-link
<router-link to="/xx"> </router-link> //必须传入to属性,指定路由路径不需要 #
好处:router-link 自带激活时的类名 ,可以做高亮(激活时的样式)只要在style添加类名的属性
声名式导航 - 激活类名区别
1.url上hash值 (#/home/recommend) 包含 导航的href值 (#/home) 当前a就有==“router-link-active” ==(模糊匹配)
2.url上hash值(#/home/recommend) 等于 导航的href值(#/home/recommend) 当前a就有 == “router-link-exact-active” == (精确匹配)
声名式导航—传值
方式1:
to="/path?参数名=值"
接收:$route.query.参数名
<router-link to="/part?name=小李">朋友-小李</router-link>
方式2:
(1):路由规则path上定义 /path/:参数名
(2):to="/path/值"
接收:$route.params.参数名
<router-link to="/part/小王">朋友-小王</router-link>
总结:
?key=value 用 $route.query.key 取值
/值 提前在路由规则/path/:key 用 $route.params.key 取值
默认路由 — 重定向
在规则中定义path:'/'
通过 redirect 配置项 值是要强制切换的路由路径
{
path: "/",
redirect: "/find"
}
路由 — 404
找不到路径给个提示页面 一定要放到 path 数组的最后面 匹配不到前面的path才会显示
{
path: "*",
component: NotFound
}
路由 - 模式设置
const router = new VueRouter({
routes,
mode: "history" // 打包上线后需要后台支持, 默认模式是hash(回去url中的#)
})
vue路由 - 编程式导航
this.$router.push({
// 跳转路由任选一个
path: "路由路径", // 都去 router/index.js定义
name: "路由名"
})
//路由数组里, 给路由起名字
{
path: "/find",
name: "Find",
component: Find
},
// 换成span 配合js的编程式导航跳转
<span @click="btn('/part', 'Part')">朋友</span>
// 使用语法
this.$router.push({path: "路由路径"})
this.$router.push({name: "路由名"})
注意:虽然用name跳转,但是url 的hash值还是切换path路径值
场景:
方便修改:name路由名(在页面上看不见随便定义)
path可以在url的hash值看到(尽量符合组内规范)
编程式导航 - 跳转传参
this.$router.push({
name: "路由名字",
params: {
"key": 值
}
})
// 对应路由接收 $route.params.key 取值
例:
name+params => $route.params.key接收
<span @click="oneBtn">朋友-小李</span>
oneBtn(){
this.$router.push({
name: "Part",
params: {
username: "小李"
}
})
}
{{$route.params.username}} // 小李
// 第二种
this.$router.push({
path: "路由路径",
query: {
"key": 值
}
})
// 对应路由接收 $route.query.key 取值
path+query => $route.query.key接收
例:
<span @click="twoBtn">朋友-小王</span>
twoBtn(){
this.$router.push({
path: "/part",
query: {
name: "小王"
}
})
}
}
{{$route.query.name}} // 小王
区别:
name+params (内存中传递) - 刷新网页就不在了
path+query (hash值?后面) - 刷新网页还在
注意:
JS要跳转时, 如果当前url上"hash值"和"要跳转"的"一致", 发生路由重复的报错, 不会跳转
路由嵌套
路由嵌套
创建需要的二级页面
路由规则里面 children 中配置二级路由规则对象
一级页面中设置 router-view 显示二级路由页面
注意:
二级路由 path 一般不写根路径 /
跳转时路径要从 / 开始
路由守卫
场景:要对路由权限判断时
语法:router.beforeEach((to,form,next)=>{// 路由跳转“之前”先执行这里,决定是否跳转})
参数1:要跳转到的路由(路由对象信息) —> 目标
参数2:从哪里跳转的路由(路由对象信息) —> 来源
参数3:函数体 next() 才会让路由正常的切换,next(false)在原地停留,next(“强制修改带另一个路由路径上”)
注意: 如果不调用next, 页面留在原地
// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
if (to.path === "/my" && isLogin === false) {
alert("请登录")
next(false) // 阻止路由跳转
} else {
next() // 正常放行
}
})