vue-router 由浅到深

vue-router 简介：

由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

第一个单页面应用

现在我们以一个简单的单页面应用开启vue-router之旅，这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。

 

 

安装vue-router

npm install vue-router --save-dev

如果你安装很慢，也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。

解读router/index.js文件

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

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

export default new Router({      //用export default 封装代码，让外部可以引用。
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

新建个模块 Hi    

前者是es6的module中的语法      export default {}是导出模块,供其他模块进行调用

<template>
    <div class="hello">
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
     export default{   //导出模块,供其他模块进行调用
         name: 'hi',
         data(){
             return {
                 msg: '你好router'
             }
         }
     }
</script>

<style scoped>
    
</style>

引入 Hi组件：我们在router/index.js文件的上边引入Hi组件

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

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

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

输入：http://localhost:8080/#/hi     转到Hi页面

router-link制作导航

现在通过在地址栏改变字符串地址，已经可以实现页面内容的变化了。这并不满足需求，我们需要的是在页面上有个像样的导航链接  制作链接需要<router-link>标签

<router-link to="/">[显示字段]</router-link>

<p>导航 ：
     <router-link to="/">首页</router-link>
     <router-link to="/hi">Hi页面</router-link>
</p>

vue-router配置子路由

首先改造导航;

<p>导航 ：
      <router-link to="/">首页</router-link> | 
      <router-link to="/hi">Hi页面</router-link> |
      <router-link to="/hi/hi1">-Hi页面1</router-link> |
      <router-link to="/hi/hi2">-Hi页面2</router-link>
</p>

二、改写comp<template>

  <div class="hello">
    <h1>{{ msg }}</h1>

    <router-view class="aaa"></router-view>     //添加路由视图
  </div>
</template>

<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</script>
<style scoped>
</style>

三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue

参考：Hi 页面

四、修改router/index.js代码

我们现在导航有了，母模板和子模板也有了，只要改变我们的路由配置文件就可以了。子路由的写法是在原有的路由配置下加入children字段。

children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]

children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。具体看一下这个子路由的配置写法。

import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import Hi from '@/components/Hi' 
import Hi1 from '@/components/Hi1' 
import Hi2 from '@/components/Hi2' 

Vue.use(Router) 

export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})

vue-router如何参数传递

一、用name传递参数       在实际开发不常用

模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：

 <p>{{ $route.name}}</p>

把src/reouter/index.js文件里

 

 

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

<router-link>标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

• name：就是我们在路由配置文件中起的name值。
• params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

了解基本的语法后，我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

 

 <router-link :to="{name:'hi1',params:{username:'sjd'}}">Hi页面1</router-link>

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

 {path:'/hi1',name:'hi1',component:Hi1},

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

    
{{$route.params.username}}

单页面多路由区域操作

 打开了src目录下的App.vue文件，在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

<router-view ></router-view>

<router-view name="left" style="float:left;width:50%;height:300px;"></router-view>

<router-view name="right" style="float:right;width:50%;height:300px;"></router-view>

 

现在的页面中有了三个<router-view>标签，也就是说我们需要在路由里配置这三个区域，配置主要是在components字段里进行。

 

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }
 
  ]
})

最后在app.vue

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

<router-link to="/hi">Hi页面</router-link> |

 

vue-router 利用url传递参数

:冒号的形式传递参数

在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

{
    path:'/params/:newsId/:newsTitle',
     component:Params
}

在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新闻ID：{{ $route.params.newsId}}</p>
        <p>新闻标题：{{ $route.params.newsTitle}}</p>
    </div>
</template>

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

在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。

      <router-link to="/params/198/jspang website is very good">params</router-link> |

正则表达式在URL传值中的应用

希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。

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

vue-router 的重定向-redirect

redirect基本重定向

我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了.是直接redirect到path:’/’下了，这就是一个简单的重新定向。

重定向时传递参数

alias别名的使用

1.首先我们在路由配置文件里（/src/router/index.js），给上节课的hi路径起一个别名，sjd。

{
    path: '/hi',
    component: Hi,
    alias:'/sjd'
 }

2.配置我们的<router-link>，起过别名之后，可以直接使用<router-link>标签里的to属性，进行重新定向。

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

redirect和alias的区别

• redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
• alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。

填个小坑：

别名请不要用在path为’/’中，如下代码的别名是不起作用的。

路由的过渡动画

想让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性。

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

我们在/src/App.vue文件里添加了<transition>标签，并给标签起了一个名字叫fade。

css过渡类名：

组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：

1. fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
2. fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
3. fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
4. fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。

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

那我们就在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码如下：   mode模式in-out模式

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

过渡模式mode：

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

mode的设置和404页面的处理

mode的两个值  

1. history:当你使用 history 模式时，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！
2. hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。

 

404页面的设置：

用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示，为此美工都会设计一个漂亮的页面，这个页面就是我们常说的404页面。

1.设置我们的路由配置文件（/src/router/index.js）：

{path:'*',component:Error}

这里的path:’*’就是找不到页面时的配置，component是我们新建的一个Error.vue的文件。

2.新建404页面：

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

路由中的钩子

路由配置文件中的钩子函数       只能写beforeEnter钩子函数

{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('我进入了params模板');
        console.log(to);         
        console.log(from);     
        next();        
},

oreEnter得钩子函数，函数我们采用了ES6的箭头函数，需要传递三个参数。我们并在箭头函数中打印了to和from函数。具体打印内容可以在控制台查看object。

三个参数：

1. to:路由将要跳转的路径信息，信息是包含在对像里边的。
2. from:路径跳转前的路径信息，也是一个对象的形式。
3. next:路由的控制参数，常用的有next(true)和next(false)。 还可以next({path:'/'})

写在模板中的钩子函数

在配置文件中的钩子函数，只有一个钩子-beforeEnter，如果我们写在模板中就可以有两个钩子函数可以使用：

• beforeRouteEnter：在路由进入前的钩子函数。
• beforeRouteLeave：在路由离开前的钩子函数。

export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>

编程式导航

1.我们先在app.vue文件里加入一个按钮，按钮并绑定一个goback( )方法。

 <button @click="goback">后退</button>

2.在我们的script模块中写入goback()方法，并使用this.$router.go(-1),进行后退操作。

<script>
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
}
</script>

router.go(1):代表着前进，用法和后退一样]

this.$router.push(‘/xxx ‘)

1.先编写一个按钮，在按钮上绑定goHome( )方法。

<button @click="goHome">回到首页</button>

2.在<script>模块里加入goHome方法，并用this.$router.push(‘/’)导航到首页