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

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