vue-router的使用

   为了实现单页面富应用（SPA），会使用vue-router配置，实现页面的更新。

一、route,routes,router

   vue-router主要包括route,routes,router,他们的区别就是route表示单个路由对象，里面有path和component属性，routes是一个数组，里面存放很多route，而router是管理路由的，比如有点击事件发生，就得跳转到相应的路由,router负责找到对应的route。

const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routes,
  //添加mode属性    将浏览器里的url地址的哈希模式（用#拼接）改成html的history模式（全部用/拼接）
  mode: 'history',        //两种模式：hash,history
  linkActiveClass: 'active'
})

 this.$route：当前活跃路由

 this.$router：整个路由实例对象

   this.$router.push('/地址’)

二、 <router-link>与 <router-view>

2.1 <router-link>

  <router-link>默认渲染成a标签，使用tag属性就能更改渲染后的标签，to属性值表示点击router-link要跳转的地址，replace属性表示点击页面不产生历史记录，另外在router-link被点击时会自动添加进router-link-alive类,可以利用这个属性更改一些样式

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

const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routes,
  //添加mode属性    将浏览器里的url地址的哈希模式（用#拼接）改成html的history模式（全部用/拼接）
  mode: 'history',
  linkActiveClass: 'active'
})

2.2  <router-view>

   <router-view>起占位作用，之后渲染出的页面都会在router-view位置显示出来

三、重定向

  如果希望在一进入页面就默认显示一个组件的内容，可以进行重定向

{
    //修改路由默认路径为首页
    path: '',                //一进入页面的路径是' ',重定向为home
    redirect: '/home'
},

一进入的路径为' ',redirect重定向

四、动态路由

  如果我们想在点击时，在路径后传递一些参数，可以使用动态路由

  可以分为点击和点击

v-bind动态绑定
<router-link :to="'/home/'+userid">首页</router-link>        //直接加路径
<router-link :to="{path:'/about/'+userid, query:{name: 'mary', age: 18}}">首页</router-link>        //to后加对象


<button @click='userClick'>用户</button>
<button @click='profileClick'>档案</button>

//这时需要在methods里定义响应的方法
data(){
    return{
        userid: 'lisi'
    }
}
methods：{
    userClick(){
        this.$router.push('/home/'+this.userid)        
    }
    profileClick(){
        this.$router.push({
            path: '/profile/',
            query: {name: 'jack', age:20
        })
    }
}

//相应的user对应的路由也要改
{
    // 希望在url后动态拼接内容   
    path: '/user/:userId',            //:userId对应this.userid
    component: User,
    meta:{
      title: '用户'
    }
}

//之后可以在user组件内的computed计算属性内拿到传递的userId
<h2>{{userId}}</h2>
computed:{
    userId(){
        return this.$route.params.userId
    }
}

由上面例子可以看出动态路由携带信息分为两种情况：router-link点击与普通dom元素的点击

router-link：v-bind动态绑定：属性，后面接上动态路径和传递的参数query

普通dom：v-on动态绑定事件，在事件里this.$router.push( ),括号里放动态路径加传递的参数

路由配置中路径也要改为动态路由，用冒号拼接

在组件中就能通过this.$router.params拿到传递过来的动态路径

五、嵌套路由

const routes = [{
    //只要路径中含有home，就渲染Home标签内容
    path: '/home',
    component: Home,
    meta:{
      title: '首页'
    },
    // 写子组件路由信息  路径前面不用加/ 会自动拼接
    children:[
      // {
      //   path: '',
      //   redirect: 'news'
      // },
      {
        path: 'news',
        // 使用懒加载
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  }]

六、this.$router.push()与this.$router.replace()

this.$router.push(url)：跳转到指定的url，然后经过路由器渲染出对应的组件内容，会有历史记                                           录，直接将新url压栈

this.$router.replace(url)：不会产生历史记录，将新加入的url替换当前栈顶的url

七、两种模式hash,history的区别

7.1 hash模式

// url示例
www.test.com/index.html#home
www.test.com/index.html#about
 
// 实现原理
1.hash值的变化会触发浏览器的window.onhashchange事件，浏览器不会去请求后端url

7.2 history模式

// url示例
www.test.com/home
www.test.com/about
 
// 实现原理
1.是H5新特性，核心api是pushState、replaceState，浏览器会向后端发送url请求
2.这种模式需要后端配置，不然刷新页面后请求不到页面
 
// 浏览器独有的history实例，有back、go、forward、pushState、replaceState方法
 
// 路由切换跳转会触发window.onpopstate事件

  hash模式：#后的内容发生改变，虽然url发生改变但不会向后端请求数据，而且只有#前的数据会被送到后端请求数据，所以即使路径不完全一致，也不会报错404

  history模式：虽然没有了丑陋的#，但如果当页面刷新，如果后端不配合，可能会出现404

但是：

a.  pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 #后面的部分，因此只能设置与当前 URL 同文档的 URL；
b.  pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
c.  pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash只可添加短字符串；