https://router.vuejs.org/zh/

1.使用路由vue-router

1.安装
npm install vue-router --save
引入并实例化(main.js中)
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2.配置路由
-创建组件，引入组件

// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

-定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  {path:'', redirect:'/foo'} //没有路由时的默认值
]

• 创建 router 实例，然后传 routes 配置
  // 你还可以传别的配置参数, 不过先这么简单着吧。
  const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
  })

-创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')

-在根组件(App.vue)的模板组件中写上
<router-view/> //路由内容的点位，决定渲染的view显示的位置

-使用跳转
<router-link to='/foo'>首页</router-link>

2.配置完路由打开页面时有#(如：http://localhost:8080/#/home

)
可以在创建路由时，定义下模式 mode: 'history', 可以去掉#

const router = new Router({
  mode: 'history', 
  routes: routes});

3.router-link其它属性

<router-link to='/home'>首页</router-link>
router-link会渲染成a标签，渲染成button如何做?增加tag

<router-link to='/home' tag='button'>首页</router-link>

用户在点击了通过路由的跳转后，浏览器的"返回"是可以点击的，点击可以返回路由之前的页面，如果要点击了通过路由的跳转后返回按钮不可用，需要增加replace属性

<router-link to='/home' tag='button' replace>首页</router-link>

路由之间点击后，如果需要加载某个样式class修改下颜色，可以在router-link标签中增加active-class，如

<router-link to='/home' tag='button' replace  active-class="red_text">首页</router-link>

.red_text{
    color:red
}

这样当点击的路由会变成红色。

或者在创建路由的时候进行配置linkActiveClass，也能使被点击的路由使用red_text样式，例子如下

const router = new Router({
  mode: 'history', 
  routes: routes,
  linkActiveClass: 'red_text'
})

4.通过代码来跳转路由

点击按钮后跳转到其他页面的方法
通过this.router是创建路由时的实例对象
this.router.replace('/home')

5.动态路由

-配置动态路由
routes:[
//动态路径参数，以冒号开头
{ path: '/user/:id', component:User}
]

-使用的时候, userId为data()中的属性
<router-link :to=" '/user/' + userId">用户</router-link>

-在对应的User页面通过以下方法获取传递的值
this.route.params.id获取动态路由的传值

6.通过query来传递参数

通过动态路由可以传递参数，另一种传递参数的方式是通过query
$route.query 取到的是通过路由传递过来的对象

<router-link  v-bind:to=
"{
      path: '/profile',
      query: {
                    name:张三，
                    age: 22
                  }

}"></router-link>

如果在button中click事件中传递数据怎么样
-对于动态路由的配置可以这样传递

this.$router.push('/user' + this.userId)

-对于query方式传递参数可以这样写

this.$router.push({
        path:'/profile',
        query:
              {
                  name：张三，
                  age:20
              }
})

7.路由懒加载

通过路由懒加载优化应用性能
路由懒加载在ES6中的方式例子如下

routes:[
{ 
path: '/home', 
component: () => import('../components/Home')
}
]

8.路由嵌套

实现路由嵌套两个步骤
首先创建对应的子组件，并在路由映射中配置对应的子路由
然后在组件内部使用<router-view/>标签

例子：在首页中增加新闻和消息两个
通过children关键字增加

routes:[
{ 
path: '/home', 
component: () => import('../components/Home'),
          children:
          [
              {
                    path:news,
                    component:HomeNews
                },
              {
                    path:message,
                    component:HomeMessage
              }
          ]
}
]

然后在首页Home中增加<router-view/>以及<router-link>
<rounter-view>是子组件的占位
<router-link>来触发子组件什么时候出现，注意要添加完整路径
如
<router-link to="/home/news"></router-link>

9.导航守卫

实现需求：浏览器标签显示跳转过去的页面的标题
在创建路由的时候设置以下方法

const router = new Router({
  routes: routes
.....其它内容
})

//前置守卫
router.beforeEach((to, from ,next) =>{
      //to代表跳转过去的地方，类型为Route
     //from代表从哪里跳转，类型为Route
    //需要调用下next()否则路由不会进入下一个钩子，也就是不会跳转
    document.title=to.matched[0].meta.title;   //matched[0]取第一个，需要配置meta中的标题
    next();
})


配置meta例子如下

{
    path:'/home',
    component:Home,
    meta:{
              title:首页
         }
}

当页面较多时，以上的跳转不好维护，更好的方法是通过导航守卫来实现
//后置守卫，如果是后置守卫，不需要再调用next()函数了

router.afterEach((to,from)=>{

})

以上的为全局守卫，此外还有路由独享守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // 这些守卫与全局前置守卫的方法参数是一样的。
      }
    }
  ]
})

此外还有组件内守卫

详细介绍：[https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB)

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`
  }
}

10.keep-alive遇见vue-router

路由之间跳转后没有保存状态，导致再次跳转还是会原来到原来的状态。
keep-alive是vue的一个组件，用它包裹后的组件可以保留状态。
router-view是vue-router的一个组件，使用keep-alive包裹router-view后，所有组件匹配到的视图组件会缓存下来。

//使用<keep-alive>包裹router-view
<keep-alive>
      <router-veiw/>
</keep-alive>
....

beforeRouteLeave(to,from next){
  //路由跳转前记录当前的路由
  this.path = this.$route.path;
  next();
}

activied(){
      //再次处于活跃状态跳转到上次记录的路由
      this.$router.push(this.path);
      //path为data中的属性
}

<keep-alive>的include和exclude属性用于包含、排除组件。
不希望User.vue不被保存状态，则

<keep-alive exclude="user">    //user是User.vue的name
      <router-veiw/>
</keep-alive>


<keep-alive exclude="user,home">    //排除两个
      <router-veiw/>
</keep-alive>