Vue生态——vue-router（2019.03更新）
路由概念
路由，是根据不同的url地址，展示不同的内容或页面。
前端路由，把不同路由对应不同的内容或页面的任务交给前端来做。以前呢，是通过服务器来解析url地址不同而渲染出来的。
使用场景
在单页面应用，大部分页面结构不变，只改变部分内容的使用。
优缺点
优点
用户体验好，不需要每次都从服务端全部获取，快速展现给用户。
缺点
不利于SEO。
利用浏览器的前进、后退时，会重新发送请求，没有合理利用缓存机制。
起步
HTML代码
<div>
<router-link to="/">首页router-link>
<router-link to="/about">关于我们router-link>
<router-link to="/user/tim">Timrouter-link>
<router-link to="/user/chen">Chenrouter-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代码
<router-link to="/user/tim">Timrouter-link>
<router-link to="/user/chen">Chenrouter-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 的 中
children: [
{
path: 'child',
// 懒加载组件
component : () => import ('@/views/Child.vue'),
}
]
},
Parent.vue
<template>
<div>
I am parent
<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'}}">Videorouter-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>