Vue | Vue Router 路由的使用

Vue Router 是啥？
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

简单来说，有了 Vue Router，页面切换以及跳转的控制权完全交由前端，后端只负责返回数据，不用像 Spring MVC 那样返回一个视图名称来进行跳转或者重定向，真正实现前后端分离。

一、路由的基本使用

1、创建 Vue 项目并引入 vue-router

首先，创建一个 vue-cli 项目，具体可参考链接：https://blog.csdn.net/qq_45716120/article/details/112848675

进入到项目目录下，在命令行中安装 Vue router，可类比于安装 maven 依赖

npm install vue-router --save-dev

然后，就可以在 main.js 中引入 vue-router

import VueRouter from 'vue-router'

Vue 中需要显示声明才能使用：

Vue.use(VueRouter);

2、编写 Components 组件

在 src 的 components 目录下，新建三个 Component：Main.vue、Login.vue、Register.vue

Main.vue

<template>
    <h1>这是 Main 组件</h1>
</template>

<script>
export default {
    name: 'Main'
}
</script>

<style scoped>

</style>

Login.vue

<template>
    <h1>这是 Login 组件</h1>
</template>

<script>
export default {
    name: "Login"
}
</script>

<style scoped>

</style>

Register.vue

<template>
    <h1>这是 Register 组件</h1>
</template>

<script>
export default {
    name: "Register"
}
</script>

<style scoped>

</style>

3、编写路由文件

在 src 下新建一个 router 目录，其中创建 index.js，作为路由的主配置文件
routes 为一数组，每个路由都是一个对象，用大括号包裹，其主要参数如下：
path ：跳转的路径，相当于 Spring MVC 中 Controller 中 return 的路径
name ：自定义的组件名称
component ：引入的 Vue 组件名称
index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 组件通过export暴露接口，路由中导入组件
import Login from '../components/Login'
import Main from '../components/Main'
import Register from '../components/Register'

// 导入 vue-router 依赖
Vue.use(VueRouter);

export default new VueRouter({
    routes: [
        {
            path: '/login',   // 跳转路径
            name: 'login',    // 名称
            component: Login  // 组件
        },
        {
            path: '/main',
            name: 'main',
            component: Main
        },
        {
            path: '/register',
            name: 'register',
            component: Register
        }
    ]
});

4、在主文件 Main.js 中引入路由

在 Main.js 中引入路由，即上一步中的 index.js，路径只需写其所在目录即可扫描到
Main.js

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

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5、添加 router-link 以及 router-view

路由配置完了，主文件也引入成功，那么在页面中如何使用呢？
这就需要通过 router-link 以及 router-view 标签了。
在 App.vue 中的 template 中添加 router-link、router-view
router-link 相当于 a 标签， to 属性相当于 href 属性，用于配置路由中声明的路径，即对应 index.js 中路由的 path，匹配成功则进行跳转切换
router-view 用于展示视图，要通过它才能将跳转的视图展示出来
App.vue

<template>
  <div id="app">
      <router-link to="/main">Main</router-link>
      <router-link to="/login">Login</router-link>
      <router-link to="/register">Register</router-link>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

6、测试效果

在项目目录的终端窗口（命令行）中输入：

npm run dev

浏览器中运行：

点击超链接可以实现组件的替换，说明我们的路由跳转生效了。

二、参数传递以及重定向

1、参数传递

方式1

修改 App.vue 中 route-link 的 to 属性，让其携带参数：

<router-link :to="{name:'login', params:{id:1}}">Login</router-link>

修改 index.js 中的路由的 path 属性

{
    path: '/login/:id',   // 跳转路径
    name: 'login',    // 名称
    component: Login  // 组件
},

重新测试：

以上方式实现的效果与 Controller 中的 RequestMapping 和 PathVariable 是类似的，同样都为 RestFul 风格方式的传参

方式2

在 index.js 的路由配置中增加 “props: true” 属性

{
     path: '/login/:id',   // 跳转路径
     name: 'login',    // 名称
     component: Login,  // 组件
     props: true
 },

在 Login.vue 中通过 props 接受 id 参数

<script>
export default {
    props: ['id'],
    name: 'Main'
}
</script>

同样可实现如下效果：

2、重定向

添加 redirect 属性即可
修改路由中 register 的配置，删掉 Component，用 redirect 取代，路径为 “/Main”，即重定向至 Main

{
    path: '/register',
    redirect: '/main'
}

重新运行，点击 Register，可以看到重定向至 Main

三、404 跳转处理

Tips：要想取消浏览器地址栏中地址中间的 # 号，需在 routes 前添加：

mode: 'history'

在 Component 目录下新建一个 NotFound.vue，用于404统一跳转
NotFound.vue

<template>
    <div>
        <h1>404，您访问的页面不存在！</h1>
    </div>        
</template>

<script>
export default {
    name: 'NotFound'    
}
</script>

<style scoped>

</style>

创建完视图后，当然就是配置路由了，在 index.js 的末尾添加多一项路由：

{
    path: '*',
    component: NotFound 
}

星号表示匹配所有请求，也就是当上方的路由都匹配不到时，自动跳转到 NotFound.vue
测试效果如下：

四、进入路由前结合 Axios 获得后台数据

在进入视图前，往往需要做数据初始化，通过在目的视图的 beforeRouteEnter() 方法中发送 Ajax 请求获取后台接口数据即可
我们知道，Vue 中网络通信主要通过 Axios，所以首先需安装 Axios 的包

安装 axios

npm install axios

安装成功如下所示：

安装 vue-axios

npm install --save vue-axios

安装成功如下所示：

在 Main.js 中引入 Axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

在 static 下创建 mock 目录，其中添加一个 data.json，用于模拟后端接口数据
data.json

{
    "name": "今天要学习",
    "url": "https://www.baidu.com",
    "age": 3,
    "school": {
        "xiaoxue": "小学",
        "chuzhong": "初中",
        "gaozhong": "高中"
    },
    "friends": [
        {
            "name": "xiaoming",
            "age":1
        },
        {
            "name": "xiaohong",
            "age":2
        },
        {
            "name": "xiaohua",
            "age":3
        }
    ]
}

static 下的静态资源可直接被访问到：

在 Login.vue 中增加两个函数 ：beforeRouteEnter 和 beforeRouteLeave
前者是在跳转路由前执行，后者是在路由跳转离开后执行
其中的 next() 方法可控制路由跳转及执行一些操作（其可以直接调用 Vue 实例中的 methods ），类似于后端的拦截器过滤器
我们只需要在路由跳转前通过 axios 发送 Ajax 请求获取后端返回的数据，然后通过 vue 加载渲染即可完成数据初始化操作

    beforeRouteEnter:(to,from,next)=>{
        console.log('进入路由之前');
        next(vm=>{
            vm.getData();
        });
    },
    beforeRouteLeave:(to,from,next)=>{
        console.log('进入路由之后');
        next();
    },
    methods: {
        getData: function() {
            this.axios({
                method: 'get',
                url: 'http://localhost:8081/static/mock/data.json'
            }).then(function (response) {
                console.log(response);
            })
        }
    } 

在浏览器的控制台中查看请求得到的 json 如下：

可以看到，在路由跳转前执行了 beforeRouteEnter() 方法，然后在其中调用 getData() 方法获得 json 数据

附录：
Vue Router 官方文档：https://router.vuejs.org/zh/installation.html
Axios 官方文档：http://www.axios-js.com/zh-cn/