Vue 的路由(课件2019-01-09、参考：http://note.youdao.com/noteshare?id=143d6ea0b8fc25e0e45a008cefb3e7e5）
后端路由 -> 路由 -> （地址->/add / /2.html）
通过地址告诉后端要干什么。
后端路由的问题：
1.切换页面的时候是跳全局刷新页面（用户体验极差）
2.A页面的静态资源和B页面的静态资源会重复请求 这就是服务器渲染->SSR。
3.利于爬虫搜索（SEO优化），对服务器的压力大，建议用于首页渲染，别的还是走ajax
前端路由：（vue的路由）
/ -> index
/2.html -> 2.html
通过不同的路由切换，干不同的事或者切换不同的页面
优势：
用户所有的操作都在一个页面完成，单页应用（spa）。 既然是一个页面，共享资源只需要请求一次即可
vue路由安装两种方式：
第一种：vue create app（自动配）
第二种：(自己配)
1)安装 npm install vue-router
2)引包：
import Vue from 'vue'
import VueRouter from 'vue-router'
3)使用 Vue.use(VueRouter)
4)配置路由 routers 把每一条路由组合起来，形参一个数组
const routes = [ { path:'/home', component:Hw //组件为 import引入的模板文件Hw }, { path:'/a', component:a //组件为 上面定义的组件a }, { path:'/', redirect: '/hw' //重定向：本来是访问 / 路径，此时重新指向‘/home’ }, { path:'/', redirect:to=>{ console.log(to); //从哪里来的路由对象，记录着上一次路由的信息 {...,path:'从哪里来的路径',...} return '/home' } }, { path:'/', redirect:{ name:'home' //需要在此之前写一个路由记录（也就是一条路由），并且在里面定义name属性，在此时可以引用 } }, { path:'*', component:Error //当输错地址的时候，跳转至Error.vue }, ]; //创建路由对象，对路由进行管理，它是由构造函数 new VueRouter()创建 export default new Vuerouter({ routes //key 和 value 都是 routers 可以简写成一个 });
5)放到根下 （在 main.js 中引入、使用）
//1、引入router
import router from "../router/router";
//2.把 router 实例注入到 vue 的根实例中，就可以使用路由了
new Vue({
el:'#app',
render:()=>h,
router
})
6)渲染 <router-view></router-view>
//router-link 用于点击跳转至某个路由，<router-link> 自动转成一个a标签 //router-view 路由匹配到的组件将显示在这里 <ul id="main"> <li><router-link to="/food" >商品</router-link></li> <li><router-link to="/rating">评价</router-link></li> <li><router-link to="/seller">商家</router-link></li> </ul> <router-view></router-view>
注意：
new Route({routes}) Route 是 vue-router
new Vue({router})
（hash路由-> #/... 不会刷新页面）
（history路由 /... 长的和后端路由一样的`前端路由`，同样不会刷新页面）
子路由：
如果有子路由，在原路由上挂一个children属性，children为一个数组，数组下又包一些对象，对象的path不要加 ' / '
{
path:'/',
component:app,
children:[
{
path:'a',
component:aaa
}
]
}
有子级路由，那么记得在父级身上加上<router-view>< /router-view> 此时组件就会在父级的组件上显示。不管多少层都遵循这个规律。
解决激活状态切换时加不了事件的问题：使用.native
比如：@click.native="xxx(..)"
如果要在刷新页面的时候通过路由的信息来操作数据，可以在created下使用this.$route这个的属性
this.$route 存着一些与路由相关的信息 常用的：
params 预设的变量 （动态路由会用到）
path 当前的路由的路径
query 查询信息 ？号
hash hash信息 #号
<router-link> 自动转成一个a标签
to=' / ' 放一个简单的字符串即可（to，就是去哪里的意思，里面放一个字符串的地址）
除了可以写成to，还可以是 :to
:to 的后面可以写成字符串 比如：
to='/a'
:to=" '/a' "
:to 可以是字符串，也可以是一个对象：
:to={path:'/a',query:{a:5}}"
:to="{name:'a',params:{a:5}}"
注意：如果使用params就不能定义path，要改为使用name（yinwei）
注意：路径前面一定要带 /，不然在配置路由的时候，地址会累加。
编程式路由：(和html5 的 History有点像)
可以使用this.$router 身上的方法去任意切换路由 里面有几个方法：
push() 直接放入跳转的路径（路由）
比如：this.$router.push('/c')
go() 去第几个
比如：this.$router.go(-1)上一步 (+1)下一步
replace()把当前路径替换成什么
比如：this.$router.replace('/c')
动态路由：（常用于：页面结构一样，内容不一样的时候。比如商品详情页，只是商品id不同）
动态路由路径参数以冒号开头
比如：path:'/:xxx' 意思是：
只要是根下的任意路径都能匹配到，通过 $route.params.xxx 获取
const routes = [ { path:'/about/:num', component:about } ] <template> <ul> <li v-for="(val,key) in obj[$route.params.num]">{{val}}</li> </ul> </template> export default{ data(){ return{ obj:{ a:[1,2,3], b:[4,5,6], c:[7,8,9] } } } } //localhost:8080/about/a 1 2 3 //localhost:8080/about/b 4 5 6 //localhost:8080/about/c 7 8 9
嵌套路由：
就是加children
比如：
export default new Router({ mode: 'history', //注销后变成hash路由 linkExactActiveClass:'seractive',//点子路由后，父路由依然有样式 base: process.env.BASE_URL, routes: [ { path: '/', component: Home }, { path: '/about', component:About }, { path: '/secant', name:'Secant', component:Secant, children:[ //嵌套的子路由 { path:'a', name:'aaa', component:A }, { path:'b', name:'bbb', component:B }, { path:'c', component:C } ] }, ] })
重定向：
redirect 后面可以放路径。也可以是对象。还可以是通过：to 来获取、判断、处理，并返回一个重定向的路径或路径对象。
比如：
{path:'/a',redirect:'/xxx'} //当访问某一个路径的时候跳转到另一个路径
{path:'/a',redirect:{name:'xxx'}} //可以通过 name 去指定一个组件
{path:'/a',redirect:to=>{
console.log(to)
return '/xxx'
//to 获取一个对象，记录了上一次路由的信息（常用：params、query、hash、path.....）
//return 重定向的 字符串路径或路径对象
} }
{
path:'/',
component:组件
},