vue-router学习之二

本文的学习来自技术胖大神的教程：https://jspang.com/

这里的路由是指SPA（单页应用）的路径管理器。vue-router就是WebApp的链接路径管理系统。

为什么不能直接用<a></a>标签编写链接呢？因为用Vue做的都是单页应用，相当于只有一个主的index.html页面，所以写<a></a>标签是不起作用的，必须用vue-router来进行管理。

1安装并写一个简单的路由

在项目目录下执行：

npm install vue-router --save-dev

因为当安装vue-cli环境时，默认安装好了路由，就不用再重复安装了。

1.1解读router/index.js文件

（为代码加了注释）：

import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的Hello.vue组件

Vue.use(Router) //Vue全局使用Router

export default new Router({
  routes: [                 //配置路由，这里是个数组
    {                       //每一个链接都是一个对象
      path: '/',            //链接路径
      name: 'HelloWorld',   //路由名称
      component: HelloWorld //对应的组件模板
    }
  ]
})

1.2增加一个Hi的路由和页面

在components中新建一个Hi.vue的文件：

<template>
    <div>
        <h2>{{msg}}</h2>
    </div>
</template>

<script>
export default {
  name: 'Hi',
  data () {
    return {
      msg: '这里是Hi页面'
    }
  }
}
</script>

<style>
</style>

在router/index.js中配置路由：

import Vue from 'vue' import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的Hello.vue组件
import Hi from '@/components/Hi' //引入根目录下的Hi.vue组件

Vue.use(Router) //Vue全局使用Router

export default new Router({
  routes: [                 //配置路由，这里是个数组
    {                       //每一个链接都是一个对象
      path: '/',            //链接路径
      name: 'HelloWorld',   //路由名称
      component: HelloWorld //对应的组件模板
    },
    {
      path: '/Hi',
      name: 'Hi',
      component: Hi
    }
  ]
})

浏览器中在url后面加入/Hi，http://localhost:8080/#/Hi

1.3做一个导航

在App.vue中加入

<router-link to="/">首页</router-link>
<router-link to="/Hi">Hi</router-link>

router-link就相当于<a>标签

这样就加好了：

2 vue-router配置子路由

子路由就是主栏目下面的分栏目，怎么配置路径。

实例：

1）在App.vue中增加两个导航

<router-link to="/hi/son1">子栏目1</router-link>
<router-link to="/hi/son2">子栏目2</router-link>

2）在Hi.vue中加上

<router-view></router-view>

3）建立son1.vue和son2.vue文件

<template>
    <div>
        <h2>{{msg}}</h2>
    </div>
</template>

<script>
export default {
  name: 'son1',
  data () {
    return {
      msg: 'son1'
    }
  }
}
</script>

<style>
</style>

4）配置router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import son1 from '@/components/son1'
import son2 from '@/components/son2' 

Vue.use(Router) 

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Hi',
      name: 'Hi',
      component: Hi,
      children:[
          {
              path: 'son1',
name:'Hi/son1',
              component: son1
          },
          {
              path: 'son2',
name:'Hi/son2',
              component: son2
          }
      ]
    }
  ]
})

3参数传递

参数传递一个最基本的需求。

3.1用name传递参数

在rouder/index.js中定义了name，在模板中用$route.name调用。这种方式不常用。

例：在App.vue中加一个面包屑：

<p>当前页面是：{{$route.name}}</p>

效果：

3.2通过<router-link> 标签中的to传参

对to进行绑定，然后用$route.params接收

App.vue：

<router-link :to="{name:'Hi/son1',params:{username:'子栏目的名字',id:'666'}}">子栏目1</router-link>

son1.vue：

<div>username是：{{$route.params.username}}，id为：{{$route.params.id}}</div>

4单页面多路由区域操作

如果有多个<router-view></router-view>

1)App.vue：

<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="right"></router-view>

2)新建left.vue和right.vue

3)router/index.js：

components: {
          default:HelloWorld,
          left:left,
          right:right
}

4）想让left和right调换一下：

App.vue：

<router-link to="/change">调换</router-link>

rouder/index：

{
      path: '/change',
      name: 'change',
      components: {
          default:HelloWorld,
          left:right,
          right:left
      }
},

5利用url传递参数

以前在前后端没有分开开发的时候，经常用URL传递参数。在实际开发也是有很多用URL传值的需求。比如在新闻列表中有很多新闻标题整齐的排列，点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。

例：

在router/index.js中配一个专门传递参数的路径，在path中用冒号绑定：

path:'/params/:newsId/:newsTitle',

在App.vue中加入链接：

<router-link to="/params/18/title">新闻标题</router-link>

用$route.params接收参数

可以在参数配置时加上正则，写在括号里。限制传递的格式：

例如：必须是数字才能传递：

path:'/params/:newsId(\\d+)/:newsTitle'

这时如果不是数字的参数就无法传递了：

可以看到值没有接收到。

6 vue-router 的重定向-redirect

router/index：

{
    path:'/goHome',
    redirect:'/'
}

App.vue：

<router-link to="/goHome">goHome</router-link>

重定向时想传递传数：

router/index：

{
        path:'/goParams/:newsId/:newsTitle',
        redirect:'/params/:newsId/:newsTitle'
}

App.vue：

<router-link to="/goParams/20/title hello">goParams</router-link>

7 alias别名的使用

别名和重定向差不多，但有一些细微的区别，

配置路由：

{
        path:'son1',
        component: son1,
        alias:'/otherName'
},

写链接：

<router-link to="/otherName">otherName</router-link>

redirect和alias的区别：

　　redirect：直接改变了url的值，把url变成了真实的path路径。

　　alias：URL路径没有改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。

8路由的过渡动画

在路由切换时可以增加一些动效。

在router-view的外面，加一个父标签transition，必写属性name。

8.1四种类名

有四种css类名，前缀就是transition的name属性，如果name=”fade”, 那么：

fade-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。

fade-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。

fade-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。

fade-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。

fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。

8.2过渡模式mode

in-out：新元素先进入过渡，完成之后当前元素过渡离开。

out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入。

例：

<transition name="fade" mode="out-in">
        <router-view></router-view>
</transition>

css：

.fade-enter{opacity:;}
.fade-enter-active{transition: opacity .5s;}
.fade-leave{opacity:;}
.fade-leave-active{opacity:;transition: opacity .5s;}

这样就做成了一个淡入淡出的效果。

9 mode的设置

在浏览器预览页面时，url中有一个#号，

不想显示这个#号，加上mode就可以了，

mode:'history',

mode有两种模式，history和hash，hash就是带着#号的。

10 404页面

把path配置成*就可以了。

例：

router/index.js：
import Error from '@/components/Error'
{
        path:'*',
        component: Error
},

App.vue：

<router-link to="/121212121">一个错误的路径</router-link>

11路由中的钩子

路由的钩子选项可以写在路由配置文件中，也可以写在组件模板中。

11.1在路由配置文件（router/index.js）中写钩子函数

在路由文件中只能写一个beforeEnter，就是在进入此路由配置时

router/index.js：

beforeEnter:(to,from,next)=>{
            console.log(to);
            console.log(from);
            next();
}

可以看到，to和from都是对象，里面有一些有用的数据。

三个参数：

to：路由将要跳转的路径信息，信息是包含在对像里边的。

from：路径跳转前的路径信息，也是一个对象的形式。

next：路由的控制参数，常用的有next(true)和next(false)。

next(true)就是进行跳转，next(false)不进行跳转，不写也是不跳转。

如果不写next()，

可以看到，没有跳转到相应页面。

11.2写在模板中的钩子函数

在配置文件中的钩子函数，只有一个钩子beforeEnter。写在模板中就可以有两个钩子函数：

beforeRouteEnter：在路由进入前的钩子函数。

beforeRouteLeave：在路由离开前的钩子函数。

写在模板里的路由钩子函数，可以监控到路由的进入和路由的离开，也可以轻易的读出to和from的值。

beforeRouteEnter:(to,from,next)=>{
      console.log('进入路由模板');
      next();
},
beforeRouteLeave:(to,from,next)=>{
      console.log('离开路由模板');
      next();
}

12编程式导航

编程式导航就是在业务逻辑代码中需要跳转页面，就是在业务逻辑代码中实现导航。

例：前进和后退

<button @click="goBack">后退</button>
<button @click="goForward">前进</button>

methods:{
      goBack(){
          this.$router.go(-1);
      },
      goForward(){
          this.$router.go(1);
      }
},

例：跳转到某个页面

<button @click="goHi">跳转到Hi页面</button>

goHi(){
　　this.$router.push('/Hi');
}