前端路由有什么优点和缺点?
• 优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户
• 缺点:不利于SEO;使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存;单页面无法记住之前滚 动的位置,无法在前进,后退的时候记住滚动的位置
这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统
Vue-Router入门
安装vue-router
npm install vue-router --save-dev
这里建议使用vue-cli脚手架 生成vue-router
vue init webpack vue-cli
在vue-router选项选择yes 就可以了
在src目录下的router index.js文件已经配置好了
引入组件HelloWorld的时候 这里有个"@" 其实是webpack配置的路径设置默认为src
此时我们进入vue-cli 运行
npm run dev默认打开http://localhost:8080就能看到HelloWorld中的内容了
简单谈一下router-view router-link
router-view用来显示对应组件的内容，通过router-link传递信息匹配相应的组件渲染router-view
有点类似于tab切换，可以理解为DOM元素的显示隐藏
为什么不用a标签切换
因为我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以<a></a>标签是不起作用的，必须使用vue-router来进行管理。
路由中三个基本的概念 route, routes, router
1 . route，它是一条路由,Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由，存储着当前路由页面的信息，实际开发多用$route用来获取信息
2 . routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。实际开发用处不多
3 . router 是一个机制，相当于一个管理者，它来管理路由。居多是对路由路径的操作
这边简单介绍一下meta元信息
meta也是存在于对象中的一个属性，此属性作用不是很大，一般用来判断当前是否切换到了路由，切换成功显示组件内容的作用，亦或是在$route.meta读取内容，可以设置值为数组用来调用
接下来开始实例
在components中新建组件并存入路由中
这是HelloWorld中的内容
然后我们在url中修改一下路径
回车之后显示的内容如下
一旦我们在路由中设置好对象属性，就可以在url中改变path显示内容了
router-link
如何通过router-link绑定路由
router-link一定是在有router-view标签的组件当中，通过to绑定路由中的path路径，用来切换router-view中的内容，同时改变对应的url路径
配置子路由（嵌入路由）
子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式
新建三个组件
编辑路由
此时已经可以使用url进入组件，使用router-link编辑一下router-view
router-view 一定是存在父路由中的 也就是Test中
vue-router传递参数（一）
利用router-link 中的to进行传参 格式如下 注意to前面加冒号 数据绑定
<router-link :to="{name:name,params:{key:value}}">XXXXX</router-link>
name代表路由中设置的name params代表传递的对象
<router-link :to="{name:'Test1',params:{user:'username'}}">test1</router-link>
<router-link to="/test/test2">test2</router-link>
在子路由中，父路由的name是无效的 只有children中的name才有效
{
path:'/test',
name:'Test',
component:Test,
children:[
{path:'/',component:Test}, //此处path路径 / 表示父路由下的根目录 也就是/test 显示Test
{path:'test1',name:'Test1',component:Test1}, //子路由不需要加/
{path:'test2',component:Test2}
]
}
使用$route属性进行接参
通过设定的参数即可显示
vue-router传递参数（二）
利用url传递参数，也就是直接在路由path中设置参数
简单说明一下
{
path:'/params/:newsId/:newsTitle', //冒号后面的都是参数
component:Params
}
还是利用$route接收参数
<p>{{ $route.params.newsId}}</p>
<p>{{ $route.params.newsTitle}}</p>
但是此时我们的router-link写法要稍微改变一下
<router-link to="/params/520/vue">params</router-link>
此时传递内容稍微有点固化，可根据实际情况，个人喜好进行设置
这里有个小技巧，设置一下传递的数据类型，比如我们想要数字禁止传递对象
path:'/params/:newsId(\\d+)/:newsTitle',
给参数后面设定一个正则即可，一般还是使用to传参
单页面多路由区域操作
更改了一下路由 当component属性为多个时要加s
除了default参数是固定的其余可以自定义
通过router-view进行编辑，routes中的根路由的父路由都是通过APP.VUE渲染的 注意一下 所以我们在APP.VUE中编辑 router-view
<template>
<div id="app">
<router-link to='/'>HelloWorld</router-link>
<router-link to='/test'>Test</router-link>
<router-view/>
<router-view name="lefts" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>
</div>
</template>
效果就不演示了 可以复制代码测试一下
vue-router 的重定向
开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
},{
path:'/goback',
redirect:'/'
}
]
})
在对象中设置redirect参数，配置为路径，当url中输入/goback路径的时候 会自动转入根路由
一般可以用来配置404调用 设置通配符* 路径即可
{
path:'*',
redirect:'/404组件'
}
重定向的配置跟path是相同的 也就是说也可以配置url参数
{
path:'/goParams/:newsId/:newsTitle',
redirect:'/params/:newsId/:newsTitle'
}
alias别名的使用
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
},{
path:'/test',
component:Test,
alias:'/tests'
}
]
})
其实就是双向path，可以通过path路径也可以通过alias路径访问路由，类似重定向
redirect和alias的区别
redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。
alias小坑
别名请不要用在path为’/’中,也就是根路由中，将不起作用
路由的过渡动画
在开发中有一种需求叫高端、大气、上档次。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计。
格式如下，在router-view外套上transition标签 name内容自定义
<transition name="fade">
<router-view ></router-view>
</transition>
css过渡类名： 组件过渡过程中，会有四个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;
}
transition还有mode标签
<transition name="fade" mode=" ">
<router-view ></router-view>
</transition>
过渡模式mode：
in-out:新元素先进入过渡，完成之后当前元素过渡离开。 (默认)
out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
路由的mode设置
mode的两个值
histroy:当你使用 history 模式时，URL 就像正常的 url
hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。
export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
},{
path:'/test',
component:Test,
alias:'/tests'
}
]
})
