SpringBoot + Vue(十二)前端路由VueRouter

1.VueRouter基本概念

Vue-Router是 Vue.js官方的路由插件，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

Vue比较适合单页面的项目，所有的网页的内容都是通过一个Html页面进行切换。在这个Html页面中通过不同的路由来控制不同组件的显示，这个控制就需要Vue-Router来完成。

Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射（对应联系）起来，访问不同的路径就显示不同的组件。

典型单页面运用

所有内容都在一个Html页面显示，每个标题都是一个组件，点击后在不同组件中进行内容切换，显示不同内容。

Vue-Router目前有两个版本。3.X版本 和 4.X 版本

• Vue-Router3.X 版本只能结合Vue2使用；
• Vue-Router4.X 版本只能结合Vue3使用；

Vue-Router的安装

Vue-Router3.X 版本 : npm install vue-router@3

Vue-Router4.X 版本 : npm install vue-router@4

官方文档： https://router.vuejs.org/zh/

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2.实例演示：

• 创建一个新的项目（本例使用Vue2），具体安装过程见前面笔记（九）

将刚刚创建的项目 vuerouter-demo 拖入 Visual Studio Code 中。目前项目中还没有 Vue-Router 需要进行安装。

注意：本例由于使用的是Vue2，所以要安装vue-router3

在Visual Studio Code 中终端中输入如下命令：

npm install vue-router@3

安装完成后在 package.json 中及可以看到 vue-router3

• 创建路由组件：

下面模拟网易音乐的界面，在项目components文件夹中自定义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>

三个组件都需要链接对应关系，这就需要用Vue-Router来描述。

• 声明路由链接和站位标签

可以使用<router-link>标签来声明路由链接，并使用<router-view>标签来声明路由站位符。

我们在根组件 App.vue 中进行路由的跳转，代码如下：

 <!--声明路由链接-->
 <router-link to="/discover">发现音乐</router-link>
 <router-link to="/friends">关注</router-link>
 <router-link to="/my">我的音乐</router-link>

这时App组件上就有三个按钮，有兴趣可以用CSS进行样式美化。这时候点击但是还无法跳转。因为定义的链接和三个组件的对应关系还没有设置。因为对应关系比较复杂，可以放到单独的 js 文件中写。

• 创建路由模块

在项目 src 中创建一个 router 文件夹，在里面新建一个名为 index.js 路由模块，在里面定义对应关系,代码如下：

//导入Vue和VueRouter
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'
//将VueRouter设置为vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
 //指定hash属性与组件的对应关系
 routes:[
 {path:'/discover',component:Discover},
 {path:'/friends',component:Friends},
 {path:'/my',component:My},
 ]
})

path对应链接；comment对应组件。

此时，组件要显示到哪里去？这就需要站位标签<router-view>。需要组件在哪里显示<router-view>就放到哪里。我们以放到根组件 App.vue 举例，代码如下：

一旦用户点击了“发现音乐”，浏览器就会跳转的 discover 。根据前面路由的定义discover 对应的是 Discover 组件。这时Discover 组件的内容就会被渲染到<router-view>这个位置，从而完成界面的跳转切换。

下面需要在 index.js 中将路由导出，代码如下：

export default router

最后在main.js 中导入并设置，代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
 render: h => h(App),
 router:router
}).$mount('#app')

运行 npm run serve 启动项目。

我们发现没有显示下面的视图，点击“发现音乐”等，链接才会切换，这就可以显示出来了。

第一次加载是到首页，如果这个时候加载组件而没有内容显示，这样也不合适。实际项目中会指定一个默认加载的组件。如网易云音乐中，进入首页默认是进入“发现音乐”组件。

3.vue-router进阶

• 路由重定向

用户在访问地址A的时候，强制用户跳转到地址B，从而显示特定组件的页面。

通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向。

例如将首页重定义为显示“发现音乐”组件

{path:'/',redirect:"/discover"},

• 嵌套路由

可以在组件下再嵌套组件，比如在“发现音乐”下再嵌套“推荐”、“歌单”等子路由。

在Discover.vue组件中，声明 toplist 和 playlist 的子路由链接以及子路由占位符，代码如下：

<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 和 Playlist 两个组件。

然后在 index.js 中引入Toplist 和 Playlist 两个组件，然后通过 children 属性嵌套声明子路由的方式来设置对应关系。这时index.js 完整代码如下：

//导入Vue和VueRouter
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'
//将VueRouter设置为vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
 //指定hash属性与组件的对应关系
 routes:[
 //当用户访问 / 时，调转到 /discover
 {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

• 动态路由

很多路由链接，如下：

<router-link to="prodect/1">商品1</router-link>
<router-link to="prodect/2">商品2</router-link>
<router-link to="prodect/3">商品3</router-link>

const router = new VueRouter({
 //指定hash属性与组件的对应关系
 routes:[
 {path:"prodect/1",component:Prodect},
 {path:"prodect/2",component:Prodect},
{path:"prodect/3",component:Prodect},
 ]
 },
 {path:'/friends',component:Friends},
 {path:'/my',component:My},
 ]
})

上述方式复用性非常差。

思考：如有一个商品列表，当用户点商品的时候就跳转到该商品的详情，每一个商品都会有商品详情，不可能给每一个商品写一个商品详情的组件。这时就希望跳转到详情组件的时候重用组件里面的东西。

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

{path : '/prodect/:id,component:Prodect'}

下面进行实例演示：

1.有商品就需要先建一个商品组件：Prodect.vue

2.假设商品组件是基于 My.vue 组件的子路由，修改 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>

3.在 index.js 中设置对应关系，先导入 Prodect.vue 组件

import Prodect from '../components/Prodect.vue'

4.使用 children 属性定义跳转，代码如下：

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

5.启动项目，在浏览器中就可以显示效果：点击“我的音乐”，然后在显示的商品1/2/3 中任点 一个，都可以显示“商品”这个内容出来。

现在有一个问题，在跳转到 Prodect.vue 组件时，如何知道需要显示商品几的详情呢？

解决方法：

方法1：通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数项，比如在商品详情组件的内部，根据 id 值，请求不同的商品数据。修改代码如下：

这时，点击不同的商品就显示出是商品几的详情

方法2：为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参，index.js 中修改示例代码如下：

{path:":id",component:Prodect,props:true},

Prodect.vue 组件修改如下：首先定义一个参数 id ；然后就不需要 $route.params，可以直接用于 id 来传递参数了，浏览器显示效果同上。

<template>
 <h3>商品{{ id }}</h3>
</template>

<script>
export default {
 props:["id"]
}
</script>

• 编程式导航（在此仅作了解,后面的综合运用中再详细演示）

声明式导航：<router-link :to "....">

编程式导航：router.push(...)

除了使用<router-link>创建 a 标签来定义导航链接，还可以借助 router 的实例方法，通过编写代码来实现。

想要导航到不同的 URL ，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录。所以，当用户点击浏览器“后退”按钮时，则回到之前的 URL 。

当点击 <router-link>时，这个方法会在内部调用。所以，点击<router-link :to "....">等同于调用router.push(...) 。

<template>
 <div>
 <h3>推荐</h3>
 <button @click="gotoProduct(2)">跳转到商品2</button>
 </div>
</template>

<script>
export default {
 methods:{
 gotoProduct:function(id){
 this.$router.push('/movie/${id}')
 }
 }
}
</script>

• 导航守卫

导航守卫可以控制路由的访问权限

比如还没有登录就想跳转到订单页面，这时可以用路由守卫进行统一控制。

全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限控制。可以使用 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' )