Vue生态——vue-router（2019.03更新）

路由概念

路由，是根据不同的url地址，展示不同的内容或页面。

前端路由，把不同路由对应不同的内容或页面的任务交给前端来做。以前呢，是通过服务器来解析url地址不同而渲染出来的。

使用场景

在单页面应用，大部分页面结构不变，只改变部分内容的使用。

优缺点

优点

用户体验好，不需要每次都从服务端全部获取，快速展现给用户。


缺点

不利于SEO。

利用浏览器的前进、后退时，会重新发送请求，没有合理利用缓存机制。

起步

HTML代码

<div>
		 <!--这里的router-link to后面加上路径-->
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/tim">Tim</router-link>
        <router-link to="/user/chen">Chen</router-link>
        <div>
	        <!--一定要有这组标签，它负责显示模版内容-->
            <router-view></router-view>
        </div>
</div>

JS代码

//router配置
const routes = [
	{
	  //这里指定路径
	  path: '/',    
  	  name: 'home',
      component : Home,
	},
	{
	  path : '/about',
      name: 'about',
      // 懒加载方式组件
      component : () => import ('@/views/About.vue'),
	}
];

动态路由

HTML代码

<!--这里的路径是“/user”加上用户名-->
<router-link to="/user/tim">Tim</router-link>
<router-link to="/user/chen">Chen</router-link>

<div>
	<router-view></router-view>
</div>

JS代码

{
    path : '/video/:name',
    name: 'video',
    // 懒加载组件
    component : () => import ('@/views/Video.vue'),
}

：name这一部分我们指定了一个name参数，

在video组件里面的HTML代码部分我们可以使用$route.params.name来显示它。

Video.vue

<div>
	<h1>{{$route.params.name}}</h1>
</div>

子路由

直接在路由里面嵌套，使用children。

实例

{
    path : '/parent',
    name: 'parent',
    // 懒加载组件
    component : () => import ('@/views/Parent.vue'),
    // 子路由会被渲染在 User 的 <router-view> 中
    children: [
      {
        path: 'child',
        // 懒加载组件
        component : () => import ('@/views/Child.vue'),
      }
    ]
},

Parent.vue

<template>
  <div>
    I am parent
    <!-- child组件显示在这里 -->
    <router-view />
  </div>
</template>

编程式路由

通过js实现页面的跳转。

方法

$router.push()     跳转到子路由

$router.go()       跟BOM对象上的history一样

具体参数介绍

HTML代码

<template>
  <div class="home">
    <button @click="goPrev">返回上一页</button>
  </div>
</template>

goPrev(){
      this.$router.back()
}

命名路由

router-link 使用:to添加一个对象，第一个参数是name（路由名字），第二个参数是params（路由参数）。

使用前提，定义路由的时候需要指定路由的name属性。

HTML代码
<router-link :to="{name: 'video', params: {name: 'tim'}}">Video</router-link>

命名视图

这里先看看官网的介绍 ↓↓↓

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。
你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

使用时，要给router-view添加name属性。

实例

HTML 代码

<div>
	<router-link to="/">首页</router-link>
    <div>
    	<router-view></router-view>
	    <router-view name="a"></router-view>
	    <router-view name="b"></router-view>
	</div>
</div>

JS代码

{
	path: '/',
	components: {
	  default: Foo,
	  a: Bar,
	  b: Baz
	}
}
	 

重定向

一句话，访问/a，可以跳转/b。

特别注意：

使用重定向，不会触发导航守卫！

URL会发生变化，显示的是跳转后的URL地址。

{
    path : '/main',
    // 重定向（对象）
    redirect: {
      name: 'home'
    }
    // 重定向（字符串）
    redirect: '/home'
},

别名

再来看看官网的解释 ↓↓↓

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

{ 
	path: '/a', 
	component: A, 
	alias: '/b' 
}

路由组件传参

在上面动态路由的例子里面，我们在组件的HTML代码里面使用$route.params.name显示出了来自路由的动态参数。

但是，这么一来我们的代码就会高度耦合起来，为了实现解耦，我们需要使用组件的props属性。

说得明白一点，就是我们希望视图部分的HTML代码不要太依赖于路由，否则一旦路由没有传参，就会显示不出来内容。

HTML代码---video组件

<template>
   <div>
    <h3>{{name}}</h3>
  </div>
</template>

<script>
export default {
  // 定义属性
  props: {
  	// 路由传来的name参数
    name: {
      type: String,
      default: 'tim'
    }
  }
}
</script>

{
    path : '/video/:name',
    name: 'video',
    // 懒加载组件
    component : () => import ('@/views/Video.vue'),
    // 布尔模式，诸如:name这样的动态参数，会被解析为组件的属性
    props: true
     // 对象模式，适合静态的属性
    props: {
      name: 'chen'
    }
    // 函数模式
    props: (route) => ({ query: route.query.name })
},

过渡特效

如果是单个router-view，使用transition包裹起来。

如果是多个router-view，使用transition-group包裹起来。

<transition>
  <router-view></router-view>
</transition>

<transition-group>
  <router-view></router-view>
</transition-group>

首先，我们需要给transition或者transition-group一个name属性。

然后设置CSS样式。

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


<style>

// 进入组件初始状态
.route-enter{
	opacity: 0;
}

// 进入组件过程中动画效果
.route-enter-active{
	transition: opacity 1s ease;
}

// 动画结束时效果
.route-to{
	opacity: 1;
}

// 离开组件初始状态
.route-leave{
	opacity: 1;
}

// 离开组件过程中动画效果
.route-enter-active{
	transition: opacity 1s ease;
}

// 动画结束时效果
.route-leave-to{
	opacity: 0;
}

</style>