Vue路由学习

1.Vue路由的定义

Vue路由也就是Vue Router，是Vue的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌，而路由实际上可以理解为路由跳转，就是在浏览器上任意页面上点击按钮或者链接，跳转到另外一个对应的页面。

2.Vue路由的组成

Vue路由主要是由route，routes，router组成，其中route代表单个路由，routes代表多个路由的集合，而router则是管理route，routes的管理调度者的角色，当点击按钮或链接需要路由跳转时，首先router会去查询路由集合中配置好的对应跳转路由，再经过不同的跳转操作，通过不同方法完成对应的跳转方式。

3.Vue路由的使用

本文中所用路由都是在vue-cli这个Vue脚手架下构建的vue开发环境进行。

3.1 安装并配置路由

npm install vue-router -g

上述命令执行完后，可以通过打开package.json文件，当在package.json文件中可以看到vue-router的版本号即为安装vue-router成功。

3.2 路由的使用

首先准备两个任意vue页面，接着完善main.js页面，并且配置对于的router.js页面

import Vue from 'vue'
import App from './App'
import router from './router.js'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

下面是router.js页面,

3.2.1 首先需要引入vue和vue-router，

3.2.2 接着需要引入对应需要使用到的跳转页面

3.2.3 让vue可以使用vue-router，通过use方法进行挂载

3.2.4 定义routes路由集合，将需要使用到的跳转路由添加进去，其中每个路由以对象的形式进行存入，即{}。

         每个路由中的必须指定path（路径），其中component为跳转的页面所使用的别名

3.2.5 完成路由的实例化并将routes添加进去

3.2.6 导出实例化好的路由，让外部可以引入与访问

import Vue from 'vue';
import VueRouter from 'vue-router';
import test1  from './test1.vue';
import test2  from './test2.vue';

Vue.use(VueRouter)
const routes=[
    {path:'/test1',component:test1},
    {path:"/test2",component:test2}
]

const router=new VueRouter({
//ES6简写，等于routes：routes
    routes
});

export default router

App.vue中触发与显示部分，其中空路由的解决方法有下面两种：

重定向：{path:“”,redirect:"需要跳转的页面"}，会在满足条件时，重新加载新的路径url。

直接定义一个空的路由：{path:"",component:需要跳转的页面}，会在满足条件时，不重新加载新的路径，只是将对应页面信息加载进去当前页面中。

...
//页面中点击触发部分　　
<router-link to="/test1">test1</router-link>
<router-link to="/test2">test2</router-link>
//页面中显示部分
<router-view></router-view>
...

4.动态路由

4.1 在ruoter-link中设置 to="需要跳转的路由组件别名/参数1"，如

<router-link to="/user/我是一个参数">获取参数</router-link>

4.2 在router.js中配置{path:"/test3/:name",component:test3},其中使用冒号标记,参数值会被this.$route.params获取到

    test3中的部分代码如下:

<template>
    <div>
        <p>获取的冒号后的参数：{{$route.params.name}}</p>
    </div>
</template>

4.3 此时页面上将会展示为：“获取的冒号后的参数：我是一个参数”

4.4 自定义路由

当然大多数时候我们使用的不是链接而是点击一个按钮或者自定义的一个组件后，加载对应页面，此时我们可以使用push函数进行跳转

router.push({ name: '路由组件的别名', params: { 参数1: 参数1的值}})

再跳转的页面接收对应参数

var 获取的参数 = this.$route.params.参数1;