vue-router

案例内容：

1.vue-router,cnpm i 
2.routes.js静态路由表的创建,数组，进行接口暴露
3.main.js里面引入VueRouter，使用VueRouter，引入静态路由表，然后new VueRouter实例，最后需要将router放置到Vue的实例里;
4.现在是手动链接模式，用a标签也是可以进行页面的切换的，但是感觉整个页面在刷新，因为我可以设置router的mode，可以为hash/history
如果为hash模式，用a链接也不会进行整体刷新，用history就会刷新；
4.1 嵌套路由通过children来实现操作，页面里需要进行router-view的渲染显示；
5.用router-link实现页面的跳转，并且无刷新，可以设置router-link的tag等属性，以及active-class高亮显示，需要通过exact将首页进行排除；
6.可以设置/:id进行参数传递操作，通过this.$route.params.id进行数据的获取，但是多个传递以后发现id并不变化，需要通过对$route进行
watch监控来实现id的变化操作；
7.可以通过this.$router.push进行js的页面跳转操作；
8.可以通过字符串拼接的方式进行页面跳转，但是发现这样好烦，可以设置路由的name进行跳转操作，方便很多
9.header-top,header-bottom是需要将路由里的component转化成components进行相关的设置，并且可以设置default默认组件的显示；
10.进行name跳转的时候可以设置params/query/hash值，然后如果设置hash值可以通过设置id对象名称，再加上scrollBehavior来实现页面位置
的定位操作
11.transition不光可以对component动态组件进行动画的操作，也可以对router-view进行动画的切换；
12.beforeRouterEnter,beforeRouterLeave,router.beforeEach,beforeEnter
13.可以利用resolve进行模块的异步加载操作；

案例环境

vue-cli环境下

1.下载npm i vue-router -S

2.配置静态路由routes.js

1.创建routes.js
    在main.js的同级目录下创建一个routes.js
在routes.js中
2.引入模块
    import Home from './components/Home.vue';
    import User from './components/user/User.vue';
3.定义路由并暴露接口
    export const routes = [
        {path:'/',component:Home,name:'home'},//name给路由设置名字，为了方便router-link的时候不用拼接字符串，方便些
        {path:'/user',component:User,children:[// /user      user下的模块
            {path:"",component:UserStart},// /user/
            {path:":id",component:UserDetail},// /user/:id
            {path:":id/edit",component:UserEdit,name:'userEdit'}// /user/:id/edit
        ]}
]
    
    Notice:url设参(/:id)
    接参：在对应的component后的.vue中，本处为User.vue里

3.使用

在main.js中
3.1引用下载的VueRouter和配置的路由（routes.js）
    import VueRouter from 'vue-router';//1.引用路由模块
    import {routes} from './routes';//3.引用路由配置变量
3.2使用
    Vue.use(VueRouter);//2.
3.3创建router实例，然后传routes配置参数
    const router=new VueRouter({//4.创建实例
    routes//routes:routes的简写  //5.将路由变量实例化成路由对象
    })
3.4在new Vue中实例化router
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })

4.在app.vue里的html里显示路由

<router-view></router-view>

5.查看网页

http://localhost:8080
http://localhost:8080/#/user

Router构造配置mode

mode:"history"/"hash"(浏览器环境)/"abstract"(Node.js 环境)

history: 依赖 HTML5 History API 和服务器配置，可以去掉url地址中的#。URL 就像正常的 url，例如 http://localhost:8080.com/user/id
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://localhost:8080.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
在newVueRouter中使用
例如：const router=new VueRouter({//4.创建实例
  routes,//routes:routes的简写  //5.将路由变量实例化成路由对象
  mode:'history'
})

hash: 为默认值。 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

传参接参

node.js
http://blog.csdn.net/dlmmu/article/details/61214057
vue
http://www.jb51.net/article/123456.htm
http://www.jianshu.com/p/8013d8d37bd0

1.url设参在route.js中(/:id)
    export const routes = [
    {path:'/',component:Home},
    {path:'/user/:id',component:User}
    ]
2.接参：在对应的component后的.vue中，本处为User.vue里
    export default{
        data(){
          return{
            id:this.$route.params.id//有一个需要传值的Tab栏
          }
        },
       //监听$router的变化
       watch:{//多个需要传值的Tab栏
          '$route'(to,from){
            this.id = to.params.id;
          }
        }
      }

$route与$router的区别

$route指的是当前的这个路由
$router指的是整个路由的对象

点击按钮回到首页

在button上调用gotoHome方法
methods:{
  gotoHome(){
    this.$router.push({path:"/"})//path里的路径可以变成任何想要跳转到的路径
  }
}

点击跳转到指定模块

1.在path后加一个name（route.js）
//定义了一个静态路由并暴露出去
    export const routes = [
        {path:'/',component:Home,name:'home'},//name给路由设置名字，为了方便router-link的时候不用拼接字符串，方便些
        {path:'/user',component:User,
             children:[// /user      user下的模块
            	 {path:"",component:UserStart},// /user/
           		 {path:":id",component:UserDetail},// /user/:id
           		 {path:":id/edit",component:UserEdit,name:'userEdit'}// /user/:id/edit
        ]}
    ]
2.在对应的.vue中
    <router-link tag="button" class="btn btn-primary" :to="{name:'userEdit',params:{id:$route.params.id},query:{local:'zh',q:100}}">Edit User</router-link>
    //query为？后传的参数
    //跳转后的地址http://localhost:8080/user/1/edit?local=zh&q=100
    
    上面的代码等价于
    <router-link tag="button" class="btn btn-primary" :to="link">Edit User</router-link>
    <script>
        export default {
            data(){
              return{
                link:{
                  name:'userEdit',
                  params:{id:this.$route.params.id},
                  query:{local:'zh',q:100},
                  hash:'#data'//传一个data过去
                }
              }
            
          }
        }
    </script>

scrollBehavior指定滑动位置

    当转到一个新的页面时，定位到最想要定位的位置
    1.在指定模块中
     <p id="data">Something</p>
    2.在他的上级模块（即跳转按钮所在模块）
        export default {
            data(){
              return{
                link:{
                  name:'userEdit',
                  params:{id:this.$route.params.id},
                  query:{local:'zh',q:100},
                  hash:'#data'
                }
              }
            
          }
        }
    3.在new VueRouter中
        const router=new VueRouter({
          scrollBehavior(to,from){
            console.log(to,from)
            if(to.hash){
              return{selector:to.hash}
            }
          }
        })

异步加载模块

把routes.js里的
import Home from './components/Home.vue';
import User from './components/user/User.vue';
import UserStart from './components/user/UserStart.vue';
import UserDetail from './components/user/UserDetail.vue';
import UserEdit from './components/user/UserEdit.vue';
import Header from './components/Header.vue'
替换成下面的代码
import Home from './components/Home.vue';
import Header from './components/Header.vue'

const User = resolve => {
    require.ensure(['./components/user/User.vue'],()=>{
        resolve(require('./components/user/User.vue'))
    },'user')   //user为自定义的模块名，下面为同一个大的模块
}
const UserStart = resolve=>{
    require.ensure(['./components/user/UserStart.vue'],()=>{
        resolve(require('./components/user/UserStart.vue'))
    },'user')
}
const UserEdit = resolve=>{
    require.ensure(['./components/user/UserEdit.vue'],()=>{
        resolve(require('./components/user/UserEdit.vue'))
    },'user')
}

const UserDetail = resolve=>{
    require.ensure(['./components/user/UserDetail.vue'],()=>{
        resolve(require('./components/user/UserDetail.vue'))
    },'user')
}

钩子函数

//阻止继续跳转
beforeRouteEnter: (to, from, next) => {
    if(false){
      next();
    }else{
      next(false);
    }
  }
  
//跳转后确认是否回得去
export default{
    data(){
      return {
        confirmed:false
      }
    },
    beforeRouteLeave(to, from, next)  {
      if(this.confirmed){
        next();
      }else{
        if(confirm('are you sure?')){
          next();
        }else{
          next(false);
        }
      }
    }
  }
  
  可以直接在routes.js里写钩子函数
    export const routed =[
        {path:":id",component:UserDetail,beforeEnter: (to, from, next) => {
        consloe.log('route.........')
        next();
        }},// /user/:id
    ]


const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

全局钩子router.beforeEach

功能就是每个路由进入前进行判断，满足条件才进行跳转，否则跳转到特定的页面
在main.js里
router.beforeEach((to,from,next)=>{
  console.log('global router beforeEach');
  next();
})

防止Network不停加载的方法

方法一：
1.设置mode="history"
2.用<router-link to="/user">User</router-link>实现连接
方法二：
不推荐使用，因为url地址会有#号
1.设置mode="hash"
2.在连接地址中加入#/就可以实现Network不再加载
例如：<li role="presentation">
      <a href="#/">Home</a>
  </li>
  <li role="presentation">
      <a href="#/user">Home</a>
  </li>

实现tab栏的高亮显示切换

<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
<router-link to="/user" tag="li" active-class="active"><a>User</a></router-link>
//exact防止tab栏同时高亮

router-link属性

1.":to" 属 性

相当于a标签中的"herf"属性，后面跟跳转链接所用
<router-link :to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>
to后的地址栏里可以带参数(10)
 <a href="/home/10">Home</a>

2."replace" 属 性

replace在routre-link标签中添加后，页面切换时不会留下历史记录

<router-link :to="/home" replace></router-link>

3."tag" 属 性

具有tag属性的router-link会被渲染成相应的标签

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染结果 -->
<li>Home</li>
此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面

4."active-class" 属 性

这个属性是设置激活链接时class属性，也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性

<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class属性的默认值是router-link-active,所以如果没有设置，就会被渲染为这个class

可以在router.js里面设置

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})
5."exact" 属 性

开启router-link的严格模式

<router-link :to="/" exact>home</router-link>
上面这个标签如果不加exact属性，则会在vue2.leenty.com/article页面下也会被匹配到，
这却不是我们的本意,在加了这个属性后就会正确的匹配到vue2.leenty.com下
//exact防止tab栏同时高亮

重定向redirect

本案例
//重定向   path为url栏里输入的地址
{
    path:'/redirecct-me',redirect:'/user'//redirect后的为要跳转到的url地址
},
{
    path:'/redirect-you',redirect:{name:'home'}//name为定义的跳转地址的name值
},
{
    path:'*',redirect:'/'//输入其他任意的url地址都匹配到首页
}

课外案例。

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})
重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})
甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})