1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter（进行组件切换）

1.VueRouter安装与使用

2.参数传递

创建路由组件

在项目中定义Discover.vue、Friends.vue、My.vue三个组件，将来要使用vue-router来控制它们的展示与切换：

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-link> 标签来声明路由链接，并使用<router-view> 标签来声明路由占位符。

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><script>
export default {name: "App",components: {},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

Main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = falsenew Vue({render: h => h(App),router: router
}).$mount('#app')

Index.js(在新建的src下面的router文件夹里)

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({// 指定hash属性与组件的对应关系routes: [{ path: "/discover", component: Discover },{ path: "/friends", component: Friends },{ path: "/my", component: My },],
})
export default router;

测试：

3.子路由

嵌套路由

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>

TopList.vue

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

PlayList.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";Vue.use(VueRouter);const router = new VueRouter({// 指定hash属性与组件的对应关系routes: [{ path: "/", redirect: "/discover" },{path: "/discover",component: Discover,//通过children属性，嵌套声明子路由children: [{ path: "toplist", component: TopList },{ path: "playlist", component: PlayList },],},{ path: "/friends", component: Friends },{ path: "/my", component: My },],
});
export default router;

测试：

动态路由

动态路由指的是:把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文的冒号(:)来定义路由的参数项：

{path:'/product/:id',component:Product}

Product.vue：

<template><h3>商品</h3>
</template>

My.vue:

import VueRouter from 'vue-router';
<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><VueRouter></VueRouter></div>
</template>

index.js:

{ path: "/my", component: My },

改成

  {path: "/my",component: My,children: [{ path: ":id", component: Product }],},

或者将Producr.vue改成：

<template><div><h3>商品{{ $route.params.id }}</h3> </div>
</template><script>
export default {props: ["id"],
};
</script>

4.导航守卫

控制路由的访问权限

全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制.

你可以使用 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')