使用vue-router实现页面跳转

一.安装
npm install vue-router --save

//路由占位符
<template>
  <div id="app">
    <router-view />
  </div>
</template>

二.在router.js中配置路由规则井创建路由实例

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const routes = [
  {
    path: '/',
    name: '',
    redirect: '/home'
    component: () => import("../view/tuCeng"),
    meta: {
      requireAuth: false //配置拦截
    }
  }
]

const router = new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to,from,next)=>{
  if(to.meta.requireAuth){
    if(sessionStorage.getItem('Message')){
      next();
    }else{
      next({
        path:'/login'
      })
    }
  }else{
    next();
  }
})
export default router;

三.router挂载到Vue根实例中

new Vue({
  render: h => h(App),
  store,
  router,
}).$mount('#app')

四.路由跳转传参
（1） 声明式router-link
query参数

 // to的字符串写法 
 <router-link :to="`/login?id=${message.id}&title=${message.title}`"></router-link>
 <router-link :to="'/login?'+o.id"></router-link>
 
 //to的对象写法
 <router-link :to="{path: '/login',query: {id: message.id,title: message.title}}"></router-link>
 通过$route.query接收

params参数

// to的字符串写法 
<router-link :to="`/login/${message.id}/${message.title}`"></router-link>
//需在router.js中配置
path: '/login/:id/:title'

//to的对象写法
<router-link :to="{name: 'login',params:{id:message.id,title: message.title}}"></router-link>
//params需使用name
通过$route.params接收

（2）编程式$router.push
query参数

this.$router.push(
  {
    path: '/login',
    query: {
      id: id,
      title:title
    }
  })

params参数

this.$router.push(
 {
   name: '/login',
   params: {
     id: id,
     title:title
   }
 })

（3）路由的props配置
params参数
在router.js中设置 props:true 将路由收到的所有params参数通过props传给组件

  //页面接收
<template>
<div>
   <!-- 通过 props 接收 -->
   <div>编号：{{ id }}</div>
   <div>标题：{{ title }}</div>
   </div>
</template>
<script>
   export default {
       props:['id','title']
   }
</script>

query参数

//router.js中配置
props($route) {
    return {
       id: $route.query.id,
       title: $route.query.title
    }
}
//解构
props({query}) {
  return {
     id: query.id,
     title: query.title
  }
}
props({query:{id,title}}) {
  return{id,title}
}

（4）编程式控制前进后退

this.$router.back()
this.$router.forward()
this.$router.go(num)

五.Vue-router的hash和history模式

hash模式：
路径用#拼接在真实url后面，当#后面的hash发生变化时,不会向服务器发出请求。
浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作。
hash的改变会记录在window.history中，因此就可以发现浏览器可以实现前进后退功能了，因此实现了无刷新跳转。

history模式：
主要使用HTML5的pushState()和replaceState()这两个api来实现的。
pushState()可以改变url地址且不会发送请求。
replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。
可以将url替换同源url并且不刷新页面，http并没有去请求服务器该路径下的资源，如后端没有配置对应的子路由处理，则会返回404错误。