springboot和vue：十二、VueRouter(动态路由)+导航守卫-CFANZ编程社区

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 = false

new 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’)