vue-router

一、浅谈前端发展

后端渲染->前后端分离->单页面富应用

后端渲染/路由是指服务端利用就java等后端语言处理使得页面在后端就完成页面渲染，后送至客户端。优点对SEO友好。

随着ajax请求的广泛应用，前后端分离登上舞台。随着客户端在地址栏输入相应的URL，浏览器会向服务器发出一次请求，拿到相应的资源文件。需要注意的，地址栏输入一次，浏览器就会发出一次ajax请求。

单页面富应用，在前后端分离的基础上加一层前端路由。前端可以自己实现路由映射。客户端发出一次请求后，将会从服务端将所有文件请求下来，通过前端路由，客户端可从总文件中抽离出相应文件并渲染。

二、vue路由端使用和配置

引用vue-router插件

引用router文件后
Vue.use('Router') #使用组件，内部自动调用install方法

注册router组件

const routes=[{
        #默认映射
        path:'',
        redirect:'路径'
    }
    {
        path:'#'
        component:组件名 
    }] #注意：引用时应事先引用组件文件，注册时一个映射一个对象

使用router

<router-link></router-link>
组件渲染后会替换他
相关属性
1.tag
2.to
3.append
4.replace
5._active
<router-view></router-view> #占位用于显示路由过来的资源，

路由的默认值和history模式

{path:'',redirect:''} #实现默认页面重定向
history模式，在创建router组件时手动添加mode属性，value:' history'

代码跳转路由

this.$router.push('path') or .replace('path')
#.back() or #.go(num)

动态路由的使用及具名路由

配置中使用:#方式实现
path:'/home/:userid'
componet: #
拓展：添加name:''属性的具名路由以实现动态路由

路由懒加载

方式: 1.老方法 - 异步组件 2.amd写法 3.es6
一个懒加载生成一个js文件
写法: 配置中的component属性用路径来写

嵌套路由

step1.创建对应子组件并在映射配置中用children:[{}]配置子路由
step2.父组件内部模版使用<router-view/>模版占位，*

路由参数传递

三种方法：
    name:配置中添加name属性，用{{$route.name}}引用
    :to绑定的{name params}传参
    url传参:path:'/home/:userid/:...',用:拼接参数，通过$route.params.userid引用

$router 与 $route

$router组件是全局组件，利用所有组件都继承Vue原型的特性，
$route返回的是当前活跃的路由对象

三、手动增删路由，hash与history

锚点（#），本质是改变 window.location 的href属性
通过location.hash来改变 href，页面不会刷新，建映射关系渲染组件

mode:'history'模式

history.pushstate/replacestate({},'',url)#类似于栈的push()---back()
history.go(num) #跳转，num是跳转几级路由

Vue-router学习

vue-router