关于vue--路由（公众号开发总结）

关于路由

在router.js中引入vue和vue-router

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

路由模式

前端路由就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。angularjs中的ui-router,vue中的vue-router,以及react的react-router均是对这种功能的具体实现。

• hash模式：vue-router中默认使用的是hash模式，这样子浏览器的url上会出现#号：localhost:8080/#/
  这种模式可以在window上监听这个事件：onhashchange,因为hash发生变化的url都会被浏览器记录下来，所以浏览器的前进后退键都可以是用，这时候浏览器是没有请求服务器的。

window.onhashchange = function(event){
    console.log(event.oldUrl, event.newUrl);
}

• history模式：history模式是指使用HTML5的historyAPI实现客户端路由的模式，onhashchange只能改变#后买你的url，而history可以切换跟修改。
  1.切换历史状态（go、back、forward）

 history.go(-2);
 history.back();
 history.forward();

2.修改历史状态

history.pushState(data[,title][,url]);//向历史记录中追加一条记录
history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。
history.state;//是一个属性，可以得到当前页的state信息。
window.onpopstate;//是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数

定义路由

• 3种路由方式

1、懒加载
var router = new Router({
 mode: 'hash',
 base: process.env.BASE_URL,
 routes: [
   {
     path: '/',
     name: 'login',
     component: resolve => require(['./pages/login.vue'], resolve),
   },
   {
     path: '/register',
     name: 'register',
     component: resolve => require(['./pages/register.vue'], resolve),
   },
})
2、
routes: [
        {
         path:'/transfer/:id?',
         name:'transfer',
         component:()=>import('@/components/riches/transfer')，
         meta:{requireAuth:true}
       },
 ]
参数后面加?代表可传可不传的参数
3、普通方式
routes: [
       {path: '/home ',name: 'home ',component: home ,meta: {title: 'home',requireAuth:true}},
       {path: '/about ',name: 'about ',component: about ,meta: {title: '关于',requireAuth:true}},
   ]

• 嵌套路由

routes: [{
            path: '/',
            component: () => import( /* webpackChunkName: "home" */ './pages/home.vue'),
            children: [{
                    path: "",
                    alias: "homepage",//别名
                    component: () => import( /* webpackChunkName: "home" */ './pages/homepage.vue'),
                    meta: {
                        group: "homepage",
                        title: "首页",
                    }
                }]
           }]   

路由跳转

• router-link跳转

<router-link to="home">首页</router-link>

• this.$router.push()

// 路径
this.$router.push("/home");
// 路由名字
this.$router.push({
    name: 'home',// 用params时只能用name引入
    params:{
      name:'id'
    }
})
用params时读取参数：this.$router.params.id，在地址栏上看不到请求参数，页面刷新时有可能丢失请求数据

• this.$router.replace()

this.$router.replace({
    name: 'home',// 用replace时可以用name或者path引入
    query:{
      name:'id'
    }
})
用query时读取参数：this.$router.query.id，在地址栏可以看到请求参数

路由守卫

三个参数：to（将要去的路由）,from（出发的路由）,next（执行下一步）

• 全局守卫：
  1、router.beforeEach((to,from,next)=>{})
  2、router.afterEach((to,from)=>{})

// 比如写在main.js中
router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('请登录');
    next('/login');
  }
})

• 组件内守卫：
  1、beforeRouteEnter:(to,from,next)=>{//不可以访问this}
  2、beforeRouteUpdate:(to,from,next)=>{//可以访问this}
  3、beforeRouteLeave:(to,from,next)=>{//可以访问this}

export default {
    data(){
        return{
            name:"Arya"
        }
    },
    beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            // 如果要访问this ,必须通过 next(vm=>{})访问,因为组件此时没有创建，所以没有this
            alert(vm.name+',欢迎登录')
        })
    }
}

• 路由独享的守卫：beforeEnter:(to,from,next)=>{}

var router = new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/home',
      name: 'home',
      component: resolve => require(['./pages/home.vue'], resolve),
      beforeEnter: (to, from, next) => {
          let id = window.localStorage.getItem("id")
          if (id) {
            next()
          } else {
            next({ name: "login" })
          }
      },
    }]
})