springboot和vue：十二、VueRouter(动态路由)+导航守卫

VueRouter的简介

• VueRouter是官方的路由插件，适合单页面应用/网页的切换。
• VueRouter目前有3.x版本和4.x版本，3.x版本只能结合vue2使用，4.x版本只能结合vue3使用。
• 安装：npm install vue-router@3

目的

初始版本：我们想实现的效果为：有三个组件Discover.vue、Friends.vue、My.vue，通过vuerouter来切换并管理。

进阶版本：我们想实现的效果为：有五个组件Discover.vue、Friends.vue、My.vue、TopList.vue、PlayList.vue，其中TopList.vue、PlayList.vue是Discover.vue下的子组件。同时My页面，根据不同的id值，可以请求到不同的商品数据。

初始版本的代码

Discover.vue

<template><div><h1>发现音乐</h1></div>
</template>

Friends.vue

<template><div><h1>关注</h1></div>
</template>

My.vue

<template><div><h1>我的音乐</h1></div>
</template>

新建router目录，在目录下新建index.js

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'Vue.use(VueRouter)const router = new VueRouter({routes: [// 当用户访问/时，跳转到/discover{ path: '/', redirect: '/discover' },{ path: '/', redirect: '/discover' , component: Discover},{ path: '/discover/friends', component: Friends },{ path: '/discover/my', component: My},]
})export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 如果router目录下是index.js，那么可以省略，如果是其他名字
//譬如是a.js，那么就要写import router from './router/a.js'Vue.config.productionTip = falsenew Vue({render: h => h(App),router// 原本的写法是router: router，但是因为名称一致，所以可以省略
}).$mount('#app')

App.vue

<template><div id="app"><!-- 声明路由链接 --><router-link to="/discover">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friends">关注</router-link><!-- 声明路由占位标签 --><router-view></router-view></div>
</template>

进阶版本的代码（动态路由）

Discover.vue

<template><div><h1>发现音乐</h1><router-link to="/discover/toplist">推荐</router-link><router-link to="/discover/playlist">歌单</router-link><hr><router-view></router-view></div>
</template>

Friends.vue

<template><div><h1>关注</h1></div>
</template>

My.vue

<template><div><h1>我的音乐</h1><router-link to="/my/1">商品1</router-link><router-link to="/my/2">商品2</router-link><router-link to="/my/3">商品3</router-link><router-view></router-view></div>
</template>

PlayList.vue

<template><h3>歌单</h3>
</template>

Product.vue

<template><h3>商品{{ id }}</h3>
</template><script>
export default {props: ['id']
}</script>

TopList.vue

<template><h3>推荐</h3>
</template>

index.js

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from '@/components/Discover.vue'
import Friends from '@/components/Friends.vue'
import My from '@/components/My.vue'
import TopList from '@/components/TopList.vue'
import PlayList from '@/components/PlayList.vue'
import Product from '@/components/Product.vue'Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/', redirect: '/discover' },{path: '/discover',component: Discover,children: [{ path: 'toplist', component: TopList },{ path: 'playlist', component: PlayList },]},// { path: '/discover/toplist', component: TopList },// { path: '/discover/playlist', component: PlayList },{ path: '/friends', component: Friends },{path: '/my',component: My,children: [{ path: ':id', component: Product, props: true }]},]
})export default router

App.vue和main.js不变

导航守卫

全局导航守卫会拦截每个路由规则，有点类似后端的全局拦截器。
我们可以使用router.beforeEach注册一个全局前置守卫

router.beforeEach((to, from, next)=>{if(to.path==='/main'&&!isAuthenticated){next('/login')}else{next()}
})

to:即将进入的目标
from:当前导航正要离开的路由
注意：在守卫方法中如果声明了next形参，则必须调用next()函数，否则不允许用户访问任何一个路由。

• 直接放行：next()
• 强制停在当前页面：next(false)
• 强制跳转到登陆页面：next(‘/login’)