Vue路由

一、roue和router区别

1. router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性： 用作路由跳转

   // path后面加/：表示是根目录下访问
   // path后面不加/：表示是父组件的路径下访问
   
   const router = [{
       path: '/login',
       name: 'login',
       component: () => import('@/views/login'),
       meta: { title: '登录页' },
      },{
       path: '/home',
       component: () => import('@/views/home'),
       meta: { title: '主页' },
       children: [{
           path:'test',
           name:'test',
           component: () => import('@/views/home/test'),
       }]
   }]
   
   // http://localhost:8080/login
   // http://localhost:8080/home/test

2. route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

二、路由钩子-路由守卫

// 路由钩子
    // 全局守卫
    beforeEach // 进入路由之前
    afterEach  // 进入路由之后
    beforeResolve // 在beforeRouteEnter调用之后调用

     // index.js 入口文件
    import router from './router'; // 引入路由
    /**
     * to: 将要进入的路由对象
     * from:将要离开的路由对象
     * next: 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)
     */
    router.beforeEach((to, from, next) => { 
      next();
    });
    router.beforeResolve((to, from, next) => {
      next();
    });
    router.afterEach((to, from) => {
      console.log('afterEach 全局后置钩子');
    });

   
    // 单个路由里面的钩子
    beforeEnter  // 调用顺序在全局守卫后面
    
    const router = new VueRouter({
         routes: [
           {
              path: '/test',
              component: Test,
              beforeEnter: (to, from, next) => { 
                  // 参数用法与全局的钩子都一样,调用顺序在全局前置守卫后面，所以不会被全局守        卫覆盖
                }
           }
         ]

    })
    
    // 组件路由
    beforeRouteEnter // 进入路由之前
    beforeRouteUpdate // 复用同一个组件时
    beforeRouteLeave  // 离开当前路由
     
    beforeRouteEnter(to, from) {
    
    }
    
    // 完整的导航解析过程
    // 失活的组件调用 beforeRouteLeave
    // 调用全局钩子   beforeEach
    // 一、在重复调用的组件beforeRouteUpdate
    // 单个路由的     beforeEnter
    // 二、在被激活的组件调用beforeRouteEnter
    //   调用全局的 beforeResolve
    // 调用全局的   afterEach

// 触发钩子的顺序
// 将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
beforeEnter: 路由独享守卫
beforeRouteEnter: 路由组件的组件进入路由前钩子。
beforeResolve:  路由全局解析守卫
afterEach:路由全局后置钩子
beforeCreate:组件生命周期，不能访问this。
created:组件生命周期，可以访问this，不能访问dom。
beforeMount:组件生命周期
deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
mounted:访问/操作dom。
activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
执行beforeRouteEnter回调函数next。

三、路由的监听方式

// 一、路由监听方式1： 通过 watch 进行监听
//1.1 一般监听
watch: {
    $route(to,from) {
        console.log('路由变化了')
        console.log('当前页面路由：' + to.path);
        console.log('上一个路由：' + from);
    }
}
// 1.2深度监听
watch: {
    '$route': { // $route可以用引号，也可以不用引号  监听的对象
         handler(to, from){
            console.log('路由变化了')
            console.log('当前页面路由：' + to);
            console.log('上一个路由：' + from);
         },
         deep: true, // 深度观察监听 设置为 true
         immediate: true, // 第一次初始化渲染就可以监听到
     }
}

// 二、路由监听方式2：通过钩子函数beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave进行监听
export default{
    beforeRouteEnter(to, from, next){
        // 渲染该组件前调用这个钩子，因此组件还未被创建，不能获取this
        next()
    },
    beforeRouteUpdate(to, from, next){
        //这个组件是被复用的时候调用，this可以被访问到
        next()
    },
    beforeRouteLeave(to, from, next){
        // 导航离开当前路由的时候被调用，this可以被访问到
        next()
    },
}

//三、路由监听方式3：全局路由监听 this.$router.beforeEach
// 3.1方式1、在App.vue的create中进行全局路由监听
export default  {
    name:  'App',
    created() {
        this.$router.beforeEach((to, from, next) => {
            console.log(to);
            console.log(from);
            next()
        })
    }
}
// 3.2方式2、在路由文件（/router/index.js）中进行全局路由监听
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

let routes = [
     {
       path: '/login',
       component: resolve => require(['@/views/login'], resolve),
     },
]

let router = new Router({
    mode: 'history', // 去掉 url 中的 #
    scrollBehavior: () => ({ y: 0 }),
    base: process.env.VUE_APP_BASE_DOMAIN,
    routes,
})
router.beforeEach((to, from, next) => {
    console.log(to);
    console.log(from);
    next()
})

export default router

四、路由跳转方式

1. push跳转

   // 直接跳转
   // 字符串形式跳转
   this.$router.push(url)
   // 对象形式直接跳转
   this.$router.push({path: url})
   this.$router.push({name: componentName})
   
    
   //对象的形式并且带参数
   this.$router.push({path:'/goods/add?id=123'})
   this.$router.push({path: '/goods/add', query: {id: "2"}})
   this.$router.push({name: componentName, params: {id: '2'})
   
   //query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 
   //密码之类还是用params刷新页面id还在
    
   // 接受参数：
   // 获取通过query带过来的参数对象
   console.log(this.$route.query)
   // 获取通过params带过来的参数对象
   console.log(this.$route.params)

2. 使用replace跳转：this.$router.replace() (用法同上,push)
3. 使用go方式跳转：

   // 向前或者向后跳转n个页面，n可为正整数或负整数
   this.$router.go(n)
   
   

4. 使用标签跳转：

   <router-link to="/list">点击跳转</router-link>
   

5. 新的标签页打开

const {href} = this.$router.resolve({

        path: '/detail'， //跳转的路径

        query: { id: id }

})

window.open(href, '_blank')

这里需要注意一下，使用params进行传参，在新页面内使用this.$route.params对象为{}，参数无法传过来，query是可以正常传参。