vue路由详解

vue路由详解
路由分为 编程式路由和声明式路由

定义路由对象
const router = new VueRouter({
    routes:[
        {
            path: '/',
            name: '',
            // redirect: '/index', 路由重定向的位置（意思就是要把页面定向到哪一个页面）
            redirect: {
                // 可以是下面五种跳转方法中的任何一种方式
            },
            component: 组件文件
        },
        {
            path: '/index',
            name: '',
            component: index
        }
    ]
})
new Vue({
    el: '#app',
    router
})

声明式路由

<div id="app">
    <router-view></router-view>
    <!-- 最简单的写法 -->
    <router-link to="这里是要跳转的页面的path"></router-link>
    <router-link to="这里是要跳转的页面的name"></router-link>
    <!-- 第二种写法 -->
    <router-link :to="{
        path: '这里是要跳转的页面的path',
        query: {
            <!-- 要携带的参数 这里以键值对的形式书写 参数会显示在要去的页面的路由地址上 -->
        }
    }"></router-link>
    <!-- 第三种写法 -->
    <router-link :to="{
        name: '这里是要跳转的页面的路由对象的name',
        query: {
            <!-- 要携带的参数 这里以键值对的形式书写 参数会显示在要去的页面的路由地址上 -->
        }
    }"></router-link>
    <!-- 第四种写法 -->
    <router-link :to="{
        name: '这里是要跳转的页面的路由对象的name',
        params: {
            <!-- 要携带的参数 这里以键值对的形式书写 参数'不会'显示在要去的页面的路由地址上 -->
        }
    }"></router-link>
</div>
 

编程式路由写法

<button @click="pageTurn"></button>
1
methods: {
    pageTurn() {
        // 第一种写法
        this.$router.push({
            path: '要跳转的页面的路由对象的path'
        })
        // 第二种写法
        this.$router.push({
            name: '要跳转的页面的路由对象的name'
        })
        // 第三种写法
        this.$router.push({
            path: '要跳转的页面的路由对象的path',
            query: {
                // 要携带的参数 这里以键值对的形式书写 参数会显示在要去的页面的路由地址上
            }
        })
        // 第四种写法
        this.$router.push({
            name: '要跳转的页面的路由对象的name',
            query: {
                // 要携带的参数 这里以键值对的形式书写 参数会显示在要去的页面的路由地址上
            }
        })
        // 第五种写法
        this.$router.push({
            name: '要跳转的页面的路由对象的name',
            params: {
                // 要携带的参数 这里以键值对的形式书写 参数'不会'显示在要去的页面的路由地址上
            }
        })
    }
}

导航守卫
 

全局导航守卫
const router = new VueRouter({
    routes:[
        {
            path: '/',
            name: '',
            component: 组件文件,
            // 路由独享守卫
            beforeEnter: (to, from, next) => {
                // to 要去到的页面的路由对象
    // from 要离开的页面的路由对象
    // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
    // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
    // 在next中也可以传递一个对象 这个对象可以使用上述（编程式路由中的任何一种跳转方法）的跳转方法中的任何一种
            }
        }
    ]
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
    // to 要去到的页面的路由对象
    // from 要离开的页面的路由对象
    // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
    // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
    // 在next中也可以传递一个对象 这个对象可以使用上述（编程式路由中的任何一种跳转方法）的跳转方法中的任何一种
})
// 全局解析守卫
// router.beforeReslove((to, from) => {

// })
//  全局后置守卫
// router.afterEach((to, from) => {

// })
// 组件内的守卫
Vue.component('child', {
    template: '',
    data() {
        return {}
    },
beforeRouteEnter(to, from, next) {
// to 要去到的页面的路由对象
    // from 要离开的页面的路由对象
    // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
    // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
    // console.log(this)// 注意 这里的this指向的是window对象
    next(vm => {
        // vm指向vue的实例化对象
    })
}
beforeRouteUpdate(to,from, next) {
// to 要去到的页面的路由对象
    // from 要离开的页面的路由对象
    // next() 下一步要执行的逻辑 在next()中如果不传递任何参数 则直接进入to对应的页面
    // 如果next中传入一个页面的路由对象的path则next() 不会跳转到to的页面 而是会跳转到传递的path的路径的页面
}
// 离开守卫通常用来禁止用户在还未保存修改前突然离开
beforeRouteLeave(to,from, next){

}
})
new Vue({
    el: '#app',
    router
})