网易云项目
创建、启动项目并配置路由
npm init vite
npm i
npm i vue-router
npm i sass -D
在main.js中
import router from './router'
createApp(App).use(router).mount('#app')
在index中配置路由
import {createRouter,createWebHistory} from 'vue-router'
import Home from '../view/Home.vue'
import Search from '../view/Search.vue'
const router = createRouter ({history:createWebHistory(),routes:[{path:'/',name:'home',component:Home},{path:'/search',name:'search',component:Search}]
})
export default router
实现全局通用导航栏
写一个顶部的导航栏TopNav.vue在component文件夹中
<template><div class="top-nav"><div class="w content"><router-link to="/"><h1 class="logo"></h1></router-link><!-- 绑定一个导航,点击回到首页 --><div class="search-input"><input type="text" placeholder="请输入"v-model.trim="song"@keyup.enter="searchSong"/></div></div></div>
</template>
<script setup>import { ref } from "vue";import { useRouter } from "vue-router";const song = ref("")const router = useRouter()function searchSong(){router.push(`/search?song=${song.value}`)}
</script>
<style lang="scss" scoped>.top-nav {height: 70px;background-color: #242424;.content {display: flex;align-items: center;justify-content: space-between;h1 {width: 176px;height: 70px;background-image: url("https://s2.music.126.net/style/web2/img/frame/topbar.png?19dafe7dd55400ffec9b354833340e1f");background-position: 0 0;}.search-input {input {height: 40px;border-radius: 18px;padding: 5px 10px;outline: none;}}}}
</style>
useRoute和useRouter的区别,一个是获取全局路由,一个是获取当前页面的路由
在app中,将样式引入,并且去掉<style lang="scss" scoped>中的scoped,使导航栏能在全局应用
<template><div><top-nav/> <!-- 普通组件,不参与路由切换,是全局样式 --><router-view></router-view></div>
</template><script setup>
import TopNav from './components/TopNav.vue';
</script><style lang="scss">// scoped去掉,可以作为全局样式
* {padding: 0;margin: 0;box-sizing: border-box;
}
.w {width: 980px;margin: 0 auto;
}
</style>
获取axios请求的内容
在获取网易云数据的api中note app.js
在项目中
npm i axios
获取搜索的接口,放在search中,把连接板包裹在axios把获取的song.value拼接到链接后面,然后发axios请求
const route = useRoute()const song = ref("")const lists = ref([])song.value = route.query.songaxios.get(`http://localhost:3000/search?keywords=${song.value}`).then((res) => {lists.value = res.data.result.songs})
查询到数据得到一个30长度的array
将array中需要的数据渲染到页面
<template><div class="search"><div class="w list"><ul><li v-for="(item, index) in lists" :key="item.id" :class="{ active: index % 2 === 1 }"><p>{{ item.name }}</p><span><span class="inner_span" v-for="_item, _index in item.artists" :key="_index">{{ _item.name }}{{ _index + 1 < item.artists.length ? "/" : "" }}</span></span><span>{{ item.album.name }}</span><span>{{ format(item.duration) }}</span><!-- 格式化毫秒 --></li></ul></div></div>
</template>
得到的歌手不换行,超出的部分省略号,给innerspan添加三个样式即可
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
给每个歌手添加后斜杠,如果索引值+1小于数组长度就加斜杠,如果索引值+1不小于数组长度就不加斜杠{{_index + 1 < item.artists.length ? "/" : ""}}
给li添加斑马条纹样式和鼠标hover样式
<style lang="scss" scoped>.search {background-color: #eee;.list {background-color: #fff;border-left: 1px solid #615f5f;border-right: 1px solid #615f5f;ul {list-style: none;padding: 20px;li {display: flex;align-items: center;padding: 12px;gap: 10px;&.active {background-color: #f9f5f5;}&:hover {background-color: #e0dbdb;cursor: pointer;}p {width: 40%;}& > span {flex: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}}}
</style>
定义方法format用来毫秒值转分秒
分钟和秒如果不足10需要在前面添加字符串0。如果秒只有一位,获取秒数时只截取一位,然后添加字符串0;如果多于10,则截取前两位,后面多余的不要。
<script setup>import { useRoute } from "vue-router";import { ref } from "vue";import { format } from "path";import axios from "axios";function format(duration) {//毫秒转分秒let mins = Math.floor(duration / 1000 / 60)// 如果只有个位数要补一个0在前面if (mins < 10) {mins = "0" + mins}// 获取秒let secs = (duration / 1000) % 60// 字符串截取if (secs > 10) {secs = String(secs).slice(0, 2)} else {secs = "0" + String(secs)[0] // 只有一位前面加零,后面只截取一位}return mins + ':' + secs}const route = useRoute()const song = ref("")const lists = ref([])song.value = route.query.songaxios.get(`http://localhost:3000/search?keywords=${song.value}`).then((res) => {lists.value = res.data.result.songs})
</script>
在search页面重新搜索
需要监听song,如果song变化,需要重新发送请求,再把参数传给lists
封装axios请求为方法init(song)
在第一次加载的时候先运行一次init(song.value)
需要监听route.query.song的变化,变化了重新执行init
route.query是一个响应式对象,但route.query.song是一个响应式对象里的值,如果要对这个值进行监听,需要写一个函数包装他,并返回值,这样就不会出现报错了
封装了之后,axios请求中包裹的动态字符中的.value需要删除,因为监听已经直接针对song
const route = useRoute()
const song = ref("")
const lists = ref([])
song.value = route.query.song
function init(song) {axios.get(`http://localhost:3000/search?keywords=${song}`).then((res) => {lists.value = res.data.result.songs})
}
init(song.value) // 第一次加载的时候执行
watch(() => route.query.song,(newValue) => {song.value = newValueinit(song.value)})
登录页面项目
- 在login页面设置登录按钮,如果点击则传isLogin为true到本地存储,表示已经登录
<template><div>this is login<button @click="login">login</button></div>
</template>
<script setup>
function login() {//登录身份信息(token信息)只要登陆了,就在本地存,且设置为truelocalStorage.setItem('isLogin',true)// 在本地存储中找,如果有该字段且为true,则认为登录
}
</script>
- 在进入任何页面(除开login之外),要做一个身份认证,如果已经登录,可以进入这个页面,否则进入login身份认证
<template><div><router-view></router-view></div>
</template>
- 在生命周期钩子函数router.beforeEach进入到每个页面之前,都要进行钩子函数触发,被称为全局的前置路由导航守卫。
- 如果进入的页面不是login,或者没有登录(isLogin不是true),则强制回到login
-
- router.beforeEach((to,from) => {})参数to代表去哪个页面,from表示从哪里来
- 此代码写在路由页面router
router.beforeEach((to,from) => {// 如果进入了页面不是login,或者isLogin不是true,则强制回到loginif(to.name !== 'login' && !localStorage.getItem("isLogin")){return {name: "login"}}
})
单个路由导航守卫
router是全局路由,如果想精细化定制不同页面的跳转效果,可以在路由导航列表的对象里面书写路由导航守卫
localStorage.getItem("isLogin")需要用JSON包裹,否则可能会出现不能识别的情况
{path: '/detail',name: 'detail',component: Detail,// 单个路由对象的前置导航守卫beforeEnter (to, from) {if (to.name !== "/login" && !JSON.parse(localStorage.getItem("isLogin"))) {return {name: "login"}}}
},
前置导航守卫可以设置单个,但后置导航守卫可以设置全局的
前置导航守卫可以写在router的全局、局部,或者写在组件内部。推荐写在router
组件内部写法
setup语法糖无法触发beforeRouteEnter钩子函数,需要写完整格式
<script>
/* import { onBeforeEnter } from "vue-router";
onBeforeEnter() */
export default {beforeRouteEnter (to, from) {console.log('beforeenter')}
}
</script>
离开当前路由时触发导航守卫
<script>// 离开当前路由时,触发一个导航守卫beforeRouteLeave (to, from) {let res = window.confirm('您是否想离开本页面')if(!res) {return false // 如果是false,则留在本页面}}
}
</script>
路由进阶
1.路由导航守卫
顾名思义,路由导航守卫可以让每个页面完成跳转前后进行一些逻辑实现。vue-router提供了多种导航守卫:全局的,单个路由独享的,或者组件级的。现在来逐一说明。
路由导航守卫的详细说明
1.1 全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫,这样在匹配每个路由路径的时候都会进行一次进入前的"拦截",在某些需要验证登录状态的业务场景下应用极广。
我们仍然用示例来演示全局前置守卫的使用:
现在有3个页面,分别是登录页,首页,列表页。进入任何页面前都需要进行身份验证,必须本地存储中isLogin的字段为true时才可以进入,否则统一回到登录页。按照之前学习的内容快速完成路由信息的相关配置。
在配置完路由信息后,通过router.beforeEach 注册一个全局前置守卫,其中的守卫方法接受2个参数
- to:表示当前导航即将进入的页面
- from:表示当前导航即将离开的页面
前置守卫中通过返回的路由对象实现重定向。
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import Detail from '../components/Detail.vue'
import Login from '../components/Login.vue'const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: 'home',components: Home,},{path: '/detail',name: 'detail',components: Detail,},{path: '/login',name: 'login',components: Login,},],
})
router.beforeEach((to, from) => {if (!localStorage.getItem('isLogin') && to.name !== 'login') {return {name: 'login',}}
})
export default router
在之前版本的路由中,还提供了第三个可选参数next,通过调用next方法也能进入到即将进入的路由页面,但新版本中不推荐这么做了。
1.2 全局后置守卫
和全局前置守卫类似,同样可以注册全局后置守卫,沿用上面的示例,在离开每个页面之前,都弹出一个提示框。
router.afterEach((to, from) => {alert('要离开此页面咯')
})
1.3 独享前置守卫
除了定义全局的路由守卫,还可以针对单个路由对象定义守卫:
{path: '/detail',name: 'detail',component: Detail,beforeEnter: (to, from) => {if (!localStorage.getItem('isLogin') && to.name !== 'login') {return {name: 'login',}}},
},
1.4 组件内部的路由守卫
除开在路由配置信息中定义导航守卫,还可以在组件内部定义守卫:
- beforeRouteEnter 进入路由前调用
- beforeRouteUpdate 动态参数改变时调用
- beforeRouteLeave 离开路由前调用
2.路由元信息
meta叫路由元信息,可以存储当前路由对象的一些信息
可以将任意信息添加到路由对象上,比如页面标题,鉴权认证等,Vue中的路由提供了一个meta字段,可以通过给每个路由对象配置meta字段来添加信息。
{path: '/',name: 'home',component: Home,meta: {title: '首页',},
},
在组件的生命周期中,可以将meta信息合理地调用出来。
//Home中 组件挂载完毕后 将页面的标题内容改为meta中存放的信息
<script setup>import { onMounted } from 'vue'import { useRoute } from 'vue-router'onMounted(() => {document.title = useRoute().meta.title})
</script>
这里需要写setup语法糖,但是组件内守卫不要写。虽然最好也不要写组件内守卫啦
<script setup>import { onMounted } from 'vue'import { useRoute } from 'vue-router'const route = useRoute() // 最好写在外面,不要写在钩子里onMounted(() => {document.title = route.meta.title})
</script>
3.路由嵌套
某些复杂的组件关系存在层级更深的路由,这是可以利用路由嵌套来实现,给需要添加二级路由的路由对象添加children属性来配置二级路由,同样使用来渲染出口。
现在给Detail路由页面添加二级子路由,能够显示用户详情和头像详情,在对应的路由配置中添加children属性
// 不要忘记最上面的引入!!!
{path: '/detail',name: 'detail',component: Detail,meta: {title: '详情页',},children: [{ path: 'users', name: 'users', component: Users },{ path: 'profile', name: 'profile', component: Profile },],},
建立好对应的路由组件后,需要在Detail中添加二级路由的出口:
<template><h1>这是详情页</h1><router-link to="users"> <button>用户详情页</button></router-link><router-link to="profile"> <button>头像详情页</button></router-link><router-view></router-view> // 记得渲染出口
</template>
嵌套路由的使用规则跟一级路由保持一致,当然如果你的业务足够复杂,还可以嵌套三级,四级路由。
4.路由滚动行为
切换路由的过程中,VueRouter还提供了操作滚动条行为的方法,通过scrollBehavior方法可以在路由配置中规定滚动条行为
const router = createRouter({history: createWebHashHistory(),routes: [...],scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置return {top:30 //滚动到距离顶部30}}
})
5.路由懒加载
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。
首页不用做懒加载,除开首页对所有的路由都使用动态导入。
Vue Router 支持开箱即用的动态导入,这意味着你可以用动态导入代替静态导入:
const Detail = () => import('../components/Detail.vue')const router = createRouter({// ...routes: [{ path: '/detail',name:'detail', component: Detail }],
})
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../view/Home.vue'
const router = createRouter({history: createWebHistory(),routes: [{path: '/login',name: 'login',component: ()=>import('../view/Login.vue'), // 改为懒加载meta: {title: '登录',},},
6.动态路由 (路由权限)
在登录页点击登录后,button新增了一个vip的button,可以进入vip页面。登录之后,才能在路由映射关系中加上vip对象(不能是控制按钮显示隐藏
对路由的添加通常是通过 配置routes来完成的,但是在某些情况下,你可能想在应用程序已经运行的时候添加或删除路由。例如在处理一些路由权限的场景下就需要动态增加路由。
6.1 增加路由
动态增加路由主要依靠router.addRoute()方法实现,获取到router实例后,可以在合理时机注册新的路由对象,
例如在登陆后新增一个Vip路由:
const login = () => {localStorage.setItem('isLogin', true)isVip.value = truerouter.addRoute({path: '/vip',name: 'vip',component: Vip,})
}
6.2 删除路由
动态删除路由最常用的方法是通过使用 router.removeRoute() 按名称删除路由,所以注册路由信息时添加name属性是一个好习惯,大家务必养成。
我们示例中登录退出希望将Vip路由删除掉:
const out = () => {localStorage.clear()isVip.value = falserouter.removeRoute('vip')
}
最终Login组件的页面代码会显得比较丰富完整:
<template><router-link to="/"><button>首页</button></router-link><router-link to="/detail"><button>详情页</button></router-link><router-link to="/vip" v-if="isVip"><button>Vip页</button></router-link><button @click="login">登录</button><button @click="out">退出登录</button>
</template><script setup>import { ref } from 'vue'import { useRouter } from 'vue-router'import Vip from '../components/Vip.vue'const router = useRouter()const login = () => {localStorage.setItem('isLogin', true)isVip.value = truerouter.addRoute({ // 登录成功后再添加路由映射关系path: '/vip',name: 'vip',component: Vip,})}const out = () => {localStorage.clear()// localStorage.removeItem('isLogin') //去掉登录身份信息isVip.value = falserouter.removeRoute('vip') // 退出登录后动态删除路由}let isVip = ref(localStorage.getItem('isLogin'))
</script><style></style>
6.3 查看当前路由
Vue Router 提供了两个功能来查看现有的路由:
- router.hasRoute():检查路由是否存在。
- router.getRoutes():获取一个包含所有路由记录的数组。
<template><div>this is login<button @click="login">login</button><button @click="logout">logout</button><button @click="$router.push('/')">首页</button><button @click="$router.push('/detail')">详情</button><router-link to="/vip" v-if="isVip"><button>Vip页</button></router-link></div>
</template>
<script setup>
import {onMounted,ref} from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import Vip from './Vip.vue'
const router = useRouter()
// 使用json包裹,使isVip的状态依靠isLogin的状态改变
const isVip = ref(JSON.parse(localStorage.getItem("isLogin")))
function login() {//登录身份信息(token信息)只要登陆了,就在本地存,且设置为truelocalStorage.setItem('isLogin',true) // 在本地存储中找,如果有该字段且为true,则认为登录isVip.value = true// 登录之后,才在路由映射关系中加上vip对象router.addRoute({path: '/vip',name: 'vip',component: Vip,})
}
function logout() {//去掉登录身份信息localStorage.removeItem('isLogin')isVip.value = false// 动态删除路由router.removeRoute("vip")
}
const route = useRoute() // 最好写在外面,不要写在钩子里
onMounted(() => {document.title = route.meta.title
})
</script>