（Vue全家桶）Vue-router

Vue-router入门

安装vue-router

npm install vue-router --save-dev

如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。

新增一个页面和路由

在src/components目录下,新建Hi.vue文件
编写文件内容

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

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

在router/index.js文件的上边引入Hi组件引入Hi组件增加路由配置

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

Vue.use(Router)

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

现在可以通过访问浏览器/hi看到新的页面了

router-link制作导航

制作链接需要<router-link>标签，我们先来看一下它的语法。

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

to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/" ，
[显示字段] ：就是我们要显示给用户的导航名称，比如首页新闻页。

在 src/App.vue文件中的template里加入下面代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
     <div>
       <router-link to="/">首页</router-link>
       <router-link to="/hi">Hi页面</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

vue-router配置子路由

改造App.vue的导航代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
     <div>
       导航:
       <router-link to="/">首页</router-link>|
       <router-link to="/hi">Hi页面</router-link>|
       <router-link to="/hi/hi1">Hi1页面</router-link>|
       <router-link to="/hi/hi2">Hi2页面</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

更改Hi页面

把Hi.vue改成一个通用的模板，加入<router-view>标签，给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面，有点想继承关系。我们在“Hi页面”里加入<router-view>标签。

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

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

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

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

</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

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

</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

修改router/index.js代码

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

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
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: 'HelloWorld',
     component: HelloWorld
   },
   {
     path: '/hi',
     name: 'Hi',
     component: Hi,
     children:[
       {path:'/',component:Hi},
       {path:'hi1',component:Hi1},
       {path:'hi2',component:Hi2}
     ]
     
   }
 ]
})

vue-router参数传递

用name传递参数

在路由文件src/router/index.js里配置name属性。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
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: 'HelloWorld',
     component: HelloWorld
   },
   {
     path: '/hi',
     //name: 'Hi',如果有子路由这不起作用
     component: Hi,
     children:[
       {path:'/',name:'/Hi',component:Hi},
       {path:'hi1',name:'/Hi/Hi1',component:Hi1},
       {path:'hi2',name:'/Hi/Hi2',component:Hi2}
     ]
     
   }
 ]
})

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

<template>
 <div id="app">
   <img src="./assets/logo.png">
   <div>
      导航:
      <router-link to="/">首页</router-link>|
      <router-link to="/hi">Hi页面</router-link>|
      <router-link to="/hi/hi1">Hi1页面</router-link>|
      <router-link to="/hi/hi2">Hi2页面</router-link>
   </div>
   <p>{{$route.name}}</p>
   <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>

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

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
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: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hi',
      //name: 'Hi',如果有子路由这不起作用
      component: Hi,
      children:[
        {path:'/',name:'/Hi',component:Hi},
        {path:'hi1',name:'hi1',component:Hi1},
        {path:'hi2',name:'/Hi/Hi2',component:Hi2}
      ]
      
    }
  ]
})

<router-link :to="{name:'hi1',params:{username:'guosh',id:'888888'}}">Hi1页面</router-link>

name：就是我们再路由文件中起的name
params：就是我们要传的参数它可以是对象形式

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

{{$route.params.username}}

单页面多路由区域操作

在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。给App.vue文件，在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

    <router-view/>
    <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"/>
    <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"/>

不带name是默认区域只能有一个其它需要加name区分

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      components:{
        default: HelloWorld,
        left: Hi1,
        right: Hi2
      } 
    },
    {
      path: '/guosh',
      components:{
        default: HelloWorld,
        left: Hi2,
        right: Hi1
      }

    }
  ]
})

上边的代码我们编写了两个路径，一个是默认的‘/’，另一个是’/Hi’.在两个路径下的components里面，我们对三个区域都定义了显示内容。

vue-router 利用url传递参数

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

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

我们需要传递参数是ID（newsId）和标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。

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

<template>
 <div>
    <h1>{{mes}}</h1>
    <p>{{$route.params.newsId}}</p>
    <p>{{$route.params.newsTitle}}</p>
 </div>
</template>

<script>
export default {
    name:'params',
    data(){
        return{
            mes:'I m params'
        }
    }
}
</script>

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

<router-link to="/params/8888/今日头条">Url传值</router-link>|

vue-router 的重定向-redirect

//重定向到主页
 {
      path: 'goHome',
      redirect: '/'
    },
//重定向带参数
    {
      path: '/goparams/:newsId/:newsTitle',
      redirect: '/params/:newsId/:newsTitle'
    }

alias别名的使用

    {
      path: '/Hi1',
      component: Hi1,
      alias: '/guosh'
    }

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

路由的过渡动画

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

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

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

那我们就在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码如下可以实现了淡入淡出的效果：

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

mode的设置和404页面的处理

mode的设置

export default new Router({
  //histroy:当你使用 history 模式时，URL 就像正常的 url，去掉了#号！
  //hash:默认’hash’值,带#号的url
  mode: 'history',
  routes: [
    {
      path: '/',
      component: HelloWorld
    },
    {
      path: '/params/:newsId/:newsTitle',
      component: params
    },
    {
      path: '/goHome',
      redirect: '/'
    },
    {
      path: '/goparams/:newsId/:newsTitle',
      redirect: '/params/:newsId/:newsTitle'
    },
    {
      path: '/Hi1',
      component: Hi1,
      alias: '/guosh'
    }
  ]
})

404页面处理

1.新增一个Error的vue文件
2.设置路由配置文件index.js

    {
      path: '*',
      component: Error
    }

3.当输入找不到的路径时会自动跳转到404页面

路由中的钩子

路由配置文件中的钩子函数

 {
      path: '/params/:newsId/:newsTitle',
      component: params,
      beforeEnter: (to, from, next) => {
        console.log(to);
        console.log(from);
        next(true);
      }

三个参数：

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

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

next:路由是否跳转，常用的有next(true)和next(false) 更换跳转路径next(path:'路径')

写在模板中的钩子函数

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

export default {
    name:'params',
    data(){
        return{
            mes:'I m params'
        }
    },
    beforeRouteEnter: (to, from, next) => {
        console.log('准备进入路由');
        next();
    },
    beforeRouteLeave: (to, from, next) => {
        console.log('准备离开params路由模板');
        next();
    }
}

编程式导航

<button @click="goGo">前进</button>
<button @click="goBack">后退</button>
<button @click="goHome">首页</button>
<script>
export default {
  name: 'App',
  methods:{
    goGo(){
      //前进
      this.$router.go(1);
    },
    goBack(){
      //后退
      this.$router.go(-1);
    },
    goHome(){
      //可以设置任意路径这里是返回到了首页
      this.$router.push("/");
    }
  }
}
</script>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342