vue-router

学习视频地址：技术胖vue-router视频

1.Vue-router入门

1.安装Vue-router

vue-router是一个插件包，所以我们还是需要用npm来进行安装的。

npm install vue-router --save-dev

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

2.分析router/index.js文件

在src/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({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

上面这段代码的意思就是：就是在进入项目时，显示Hello.vue里边的内容代码。

可以尝试在components文件夹下新建一个Hi.vue然后在路由文件中引入并设置路径：

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

<script>
export default {
  name: 'Hi',
  data () {
    return {
      msg: 'Welcome to Hi Page!!!'
    }
  }
}
</script>

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

</style>

import Hi from '@/components/Hi'
...
routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Hi',
      name: 'Hi',
      component: Hi
    }
  ]
...

3.router-link制作导航链接

但是，这样配置的话切换页面只能够在地址栏中输入路径来进行切换，非常不方便。在实际应用中，应该要实现点击导航链接即可切换页面。制作导航链接需要用到<router-link>标签。

使用格式：

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

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

<div>
    <router-link to="/">[首页]</router-link>
    <router-link to="/Hi">[Hi 页面]</router-link>
</div>

2.vue-router配置子路由

子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。例如在一些程序个人中心的页面，我关注的和关注我的，两者的界面都差不多，仅仅是改变了标题，颜色和数据而已。

1.新增导航链接

首先在App.vue中新增两个导航链接用于链接到两个子页面：

<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>

2.改写通用模板

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

<template>
    <div>
        <h2>{{msg}}</h2>
        <router-view class="aaa"></router-view> //给子模板提供插入位置
    </div>
</template>

<script>
export default {
  name: 'Hi',
  data () {
    return {
      msg: 'Welcome to Hi Page!!!'
    }
  }
}
</script>

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

</style>

3.新增两个页面

Hi1.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Hi1!'
    }
  }
}
</script>
<style scoped>

</style>

Hi2.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Hi2'
    }
  }
}
</script>
<style scoped>
</style>

4.编写路由文件

子路由的写法是在**原有的路由配置(父路由)**下加入children字段。

{
    path: '/Hi',
    name: 'Hiii',
    component: Hi,
    children:[
        {path:'/',component:Hi},
        {path:'/Hi/Hi1',component:Hi1},
        {path:'/Hi/Hi2',component:Hi2},
    ]
}

3.vue-router传递参数

在进行各个页面之间的路由切换跳转的时候，参数传递是必不可少的。例如，在浏览商品的页面，当你点击某个商品后，会跳转到详情页面，在这个过程中，就将商品的id传递过去了。

1.用name属性传递参数

这里的name属性指的是：

  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Hi',
      component: Hi,
      children:[
        {path:'/',name: 'Hiii',component:Hi},
        {path:'/Hi/Hi1',name: 'Hiii11111',component:Hi1},
        {path:'/Hi/Hi2',name: 'Hiii22222',component:Hi2},
      ]
    }
  ]

也就是说当刚进入首页的时候，其实就相当于给首页传递了一个参数name，其值为HelloWorld。在对应的页面可以用{{ $route.name}}接收到传递过来的name值。

注意，如果一个路由有子路由，例如上面的Hi，那么在父路由下添加name属性是没用的，需要在子路由下添加name属性。

2.用中的to属性传递参数

<router-link>中的to属性传递参数的基本语法：

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

这里的to前面是有一个冒号绑定的，后面跟着的是对象形式的一个字符串。其中，

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

例如，将原本的路由标签改写：

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

注意，对应的路由文件下的index.js中的name要设置成和标签中的值Hiii11111相同。

最后在Hi1.vue中接收参数：

<p>{{$route.params.username}}</p>

4.单页面多路由区域操作

在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。其实就相当于是一级导航菜单和二级导航菜单。

首先在App.vue中添加多个(并加上name和css样式)：

<router-view></router-view>
<router-view name="left" style="{float:left;width:50%;height:200px;background-color:green;}"></router-view>
<router-view name="right" style="{float:left;width:50%;height:200px;background-color:blue;}"></router-view>

接着在路由文件index.js中的components(当有多个时component要加s)加入路由：

routes: [
    {
        path: '/',
        name: 'HelloWorld',
        components: {
            default:HelloWorld, //如果没有指定<router-view>的name值，那么就显示HelloWorld
            left:Hi1, //left，right 与 <router-view>的name值 相对应
            right:Hi2
        }
    },
    {
        path: '/111',
        name: 'HelloWorld',
        components: {
            default:HelloWorld,
            left:Hi2,
            right:Hi1
        }
    }
]

最终实现的效果就是：如果输入路径为"/"，那么在页面上会显示下图中的效果：

如果输入路径为"/111"，那么在页面上Hi1和Hi2的位置会互换。

5.vue-router利用url传递参数

用<router-link>中的to属性传递参数是官方推荐的传参方式，但是利用url传递参数是情怀。比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。

在路由文件中申明路由的path时用冒号绑定几个参数：

{
    path:'/params/:newsId/:newsTitle', //需要传递的参数是新闻id(newsId)和新闻标题(newsTitle)
    component:Params
}

接着在components文件夹下新建一个Params.vue的页面用于接收参数：

<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中加入路由链接标签就可以直接进行url传值了：

<router-link to="/params/19820/Basketball is very good">params</router-link>

点击后进入到的Params页面上就可以看到新闻Id：19820以及新闻标题：Basketball is very good

url传值既可以传数字也可以传字符串，但有时候Id字段必须是数字因为需要对url进行正则表达式的校验，具体方法是直接在参数后面以圆括号的形式加入：

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

加入了正则，我们再传递数字之外的其他参数，params.vue页面就没有办法接收到。

6.vue-router重定向redirect

开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。

1.redirect基本重定向

redirect基本重定向只需要将原来的component换成redirect参数即可：

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

这里我们设置了goback路由，但是它并没有配置任何component（组件），而是直接redirect到path:’/’下了，这就是一个简单的重新定向。

2.重定向时传递参数

重定向时传递参数只需要在ridirect后边的参数里复制重定向路径的path参数就可以了：

{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}

这里原本是去到路径/goParams，并且传递了两个参数，但是经过重定向之后转到/params并且传递的参数仍然能被接收到(参数能完美过渡衔接)。

7.alias别名的使用

首先在路由配置文件中添加一个路由：

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

接着在App.vue中添加两个链接标签：

<router-link to="/Hi1">Hi1</router-link>
<router-link to="/welcome">Hi1</router-link>

最终两个标签都能跳转到Hi1页面。

redirect和alias的区别：

• redirect：redirect是直接改变了path中url的值，因此在地址栏中会发现url地址并没有变化。
• alias：这种情况更加清楚地知道自己地访问路径，在地址栏中会发现url地址发生了变化。

踩坑

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

{
  path: '/',
  component: Hello,
  alias:'/home'
}

8.路由的过渡动画

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

<transition name="fade">
  <router-view ></router-view>
</transition>

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

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

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

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

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

添加css样式：

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

过度模式mode

默认的mode模式是in-out模式，一般有以下两种选择：

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

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

9.mode模式和404页面的处理

1.路由配置中的mode模式

之前在过渡动画的时候用到过mode，但是在路由配置文件中也有mode属性：

export default new Router({
  mode:'history',
  routes: [
    ...
  ]
})

mode属性有两个值(默认值为hash)：

• history：URL 就像正常的 url，例如 http://localhost:8081/Hello，也好看！
• hash：hash看起来就像无意义的字符排列，例如http://localhost:8081/#/Hello，不太好看也不符合我们一般的网址浏览习惯。

2.404页面的处理

当我们在地址栏输入不存在的路径的时候，vue并不会报错仍然会显示主界面App.vue。当用户输错页面时，我们希望给他一个友好的提示，为此美工都会设计一个漂亮的页面，这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制。

第一步：在路由配置文件中添加一条路径：

{
   path:'*',
   component:Error
}

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

第二步：新建Error页面Error.vue

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

第三步：用<router-link>瞎写一个标签的路径：

<router-link to="/bbbbbb">我是瞎写的</router-link> |

最终实现的效果就是当点击错误的标签链接时，会跳转到Error页面，即404页面。

10.路由中的钩子

一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中，也可以写在我们的组件模板中。

1.写在路由中的钩子函数

{
      path: '/params/:newsId/:newsTitle',
      component: Params,
      beforeEnter:(to,from,next)=>{ //beforeEnter：在进入params页面之前会执行的钩子函数
        console.log(to);
        console.log(from);
        next(); //这行代码的意思就是执行跳转这个动作，如果不写的话无法跳转
          // next(true); 执行跳转
          // next(false); 无法跳转
          // next({path:'/'}); 执行跳转，且跳转到首页
      }
}

这里的三个参数的意思是：

• to：接下去要跳转的页面，在这里就是/params页面。以对象的形式输出，里面存放路径，参数等信息。
• from：从哪里来的(跳转前的页面)，也是以对象的形式输出，里面存放路径，参数等信息。
• next：路由的控制参数(是否执行跳转动作)，常用的有next(true)和next(false)。

要注意，在进入页面前的钩子函数可以写在路由配置文件中，但是将要离开页面的钩子函数不能写在这里。

2.写在模板中的钩子函数

写在模板中的钩子函数有两个：

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

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

11.编程式导航

之前的导航都是用<router-link>标签或者直接操作地址栏的形式完成的，编程式导航就是在业务逻辑代码中实现导航。具体实现方法为：this.$router.push();

首先在页面App.vue上添加两个按钮，用于网页的前进和后退：

<div>
    <button @click="goback">后退</button>
    <button @click="goahead">前进</button>
    <button @click="gohome">回到首页</button>
</div>

接着写这两个方法：

export default {
  name: 'App',
  methods:{
    goback(){
      this.$router.go(-1); //网页后退
    },
    goahead(){
      this.$router.go(1); //网页前进
    },
    gohome(){
      this.$router.push('/'); //回到首页
    }
  }
}

; // 一定要写next()！！！不然离开不了
}
}

## 11.编程式导航

之前的导航都是用```<router-link>```标签或者**直接操作地址栏**的形式完成的，**编程式导航**就是在**业务逻辑代码**中实现导航。具体实现方法为：```this.$router.push();```

首先在页面```App.vue```上添加两个按钮，用于网页的前进和后退：

```vue
<div>
    <button @click="goback">后退</button>
    <button @click="goahead">前进</button>
    <button @click="gohome">回到首页</button>
</div>

接着写这两个方法：

export default {
  name: 'App',
  methods:{
    goback(){
      this.$router.go(-1); //网页后退
    },
    goahead(){
      this.$router.go(1); //网页前进
    },
    gohome(){
      this.$router.push('/'); //回到首页
    }
  }
}