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> 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 })