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

1
2
3
4
5

Friends.vue

1
2
3
4
5

My.vue

1
2
3
4
5

新建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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

App.vue

1
2
3
4
5
6
7
8
9
10

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

Discover.vue

1
2
3
4
5
6
7
8
9

Friends.vue

1
2
3
4
5

My.vue

1
2
3
4
5
6
7
8
9

PlayList.vue

1
2
3

Product.vue

1
2
3
4
5
6
7
8
9
10

TopList.vue

1
2
3

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

App.vue和main.js不变

导航守卫

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

router.beforeEach((to, from, next)=>{
	if(to.path==='/main'&&!isAuthenticated){
	next('/login')
	}
	else{
	next()
	}
})
1
2
3
4
5
6
7
8

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

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