Day42：网易云项目，路由进阶

网易云项目

创建、启动项目并配置路由

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)})

登录页面项目

1. 在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>

1. 在进入任何页面（除开login之外），要做一个身份认证，如果已经登录，可以进入这个页面，否则进入login身份认证

<template><div><router-view></router-view></div>
</template>

1. 在生命周期钩子函数router.beforeEach进入到每个页面之前，都要进行钩子函数触发，被称为全局的前置路由导航守卫。
2. 如果进入的页面不是login，或者没有登录（isLogin不是true），则强制回到login

1. 1. router.beforeEach((to,from) => {}）参数to代表去哪个页面，from表示从哪里来
   2. 此代码写在路由页面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>