Vue.js路由管理器 Vue Router

快来打我* 2022-04-03 03:48 196阅读 0赞

# 起步 #

*  HTML

*  JavaScript

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
    
    // 1. 定义 (路由) 组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
    
    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })
    
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')
    
    // 现在，应用已经启动了！

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：

export default {
      computed: {
        username () {
          // 我们很快就会看到 `params` 是什么
          return this.$route.params.username
        }
      },
      methods: {
        goBack () {
          window.history.length > 1
            ? this.$router.go(-1)
            : this.$router.push('/')
        }
      }
    }

# routes 选项 (Array) #

## redirect（重定向 ） ##

//此时访问/a会跳转到/b
    const router = new VueRouter({
      routes: [
        { path: '/a', redirect: '/b' }
      ]
    })
    //重定向的目标也可以是一个命名的路由：
    const router = new VueRouter({
      routes: [
        { path: '/a', redirect: { name: 'foo' }}
      ]
    })
    //甚至是一个方法，动态返回重定向目标：
    const router = new VueRouter({
      routes: [
        { path: '/a', redirect: to => {
          // 方法接收 目标路由 作为参数
          // return 重定向的 字符串路径/路径对象
        }}
      ]
    })

## 命名路由 ##

export default [
        {
            path:'/',
            redirect:'/app' //默认跳转路由
        },
        {
            path: '/app',
            //路由命名，可用于跳转
            name: 'app',
        }
    ]
    
    //可用于跳转
    <router-link :to="{name:'app'}">app</router-link>

## 路由元信息 ##

定义路由的时候可以配置 meta 字段：

export default [
        {
            path:'/',
            redirect:'/app' //默认跳转路由
        },
        {
            path: '/app',
            //**相当于HTML的meta标签**
            meta: {
                title: 'this is app',
                description: 'asdasd'
            },
        }
    ]

## 嵌套路由 ##

export default [
        {
            path:'/',
            redirect:'/app' //默认跳转路由
        },
        {
            path: '/app',
            //子路由 匹配 /app/test
             children: [
               {
                 path: 'test',
                 component: Login
               }
             ]
        }
    ]

## 路由组件传参 ##

export default [
        {
            path:'/',
            redirect:'/app' //默认跳转路由
        },
        {
            path: '/app/:id', // /app/xxx ,组件内部可以通过$route.params.id拿到这个值
            // 会把：后面的参数通过props传递给组件Todozhong 中
            //布尔模式
            props: true,
            //对象模式
            props：{id:456}
            //函数模式
            props: (route) => ({ id: route.query.b }),
            component: Todo,
    
        }
    ]

# mode选项(string) #

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
      mode: 'history',
      routes: [...]
    })

这种模式要玩好，还需要后台配置支持。

# base(string) #

应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

return new Router({
        routes,
        mode: 'history',//默认使用hash#
        base: '/base/', //在path前面都会加上/base/,基路径
      })

# linkActiveClass(string) #

默认值: "router-link-active"

全局配置 <router-link> 的默认“激活 class 类名”。

return new Router({
        routes,
        mode: 'history',//默认使用hash#
        base: '/base/', //在path前面都会加上/base/,基路径
        // 点击calss名字
        linkActiveClass: 'active-link', //匹配到其中一个子集
        linkExactActiveClass: 'exact-active-link',//完全匹配
      })

# linkExactActiveClass(string) #

默认值: "router-link-exact-active"

全局配置 <router-link> 精确激活的默认的 class。

# scrollBehavior(Function) #

路由跳转后是否滚动

export default () => {
      return new Router({
        routes,
        mode: 'history',//默认使用hash#
        base: '/base/', //在path前面都会加上/base/,基路径
        //页面跳转是否需要滚动
        /*
            to:去向路由,完整路由对象
            from:来源路由
            savedPosition:保存的滚动位置
        */
        scrollBehavior (to, from, savedPosition) {
          if (savedPosition) {
            return savedPosition
          } else {
            return { x: 0, y: 0 }
          }
        },
      })
    }

# parseQuery / stringifyQuery (Function) #

/每次import都会创建一个router，避免每次都是同一个router
    export default () => {
      return new Router({
        routes,
        mode: 'history',//默认使用hash#
        base: '/base/', //在path前面都会加上/base/,基路径
        // 路由后面的参数?a=2&b=3,string->object
         parseQuery (query) {
    
         },
          //object->string
        stringifyQuery (obj) {
    
         }
      })
    }

# fallback(boolean) #

当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。  
如果设置为false,则跳转后刷新页面，相当于多页应用

# <router-link> #

## 过渡动效 ##

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

# 高级用法 #

## 命名视图 ##

<router-view class="view one"></router-view>
    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>
    
    const router = new VueRouter({
      routes: [
        {
          path: '/',
          components: {
          //默认组件
            default: Foo,
            //命名组件
            a: Bar,
            b: Baz
          }
        }
      ]
    })

## 导航守卫 ##

*  全局守卫

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    import App from './app.vue'
    
    import './assets/styles/global.styl'
    // const root = document.createElement('div')
    // document.body.appendChild(root)
    import createRouter from './config/router'
    Vue.use(VueRouter)
    
    const router = createRouter()
    
    // 全局导航守卫（钩子）
    
    // 验证一些用户是否登录
    router.beforeEach((to, from, next) => {
        console.log('before each invoked')
        next()
    //   if (to.fullPath === '/app') {
    //     next({ path: '/login' })
    //     console.log('to.fullPath :'+to.fullPath )
    
    //   } else {
    //     next()
    //   }
    })
    
    router.beforeResolve((to, from, next) => {
        console.log('before resolve invoked')
        next()
    })
    
    // 每次跳转后触发
    router.afterEach((to, from) => {
        console.log('after each invoked')
    })
    
    new Vue({
        router,
        render: (h) => h(App)
    }).$mount("#root")

*  路由独享的守卫

可以在路由配置上直接定义 beforeEnter 守卫：

export default [
        {
            path:'/',
            redirect:'/app' //默认跳转路由
        },
        {
      
            path: '/app',
            // 路由独享的守卫钩子
            beforeEnter(to, from, next) {
                console.log('app route before enter')
                next()
            }
            component: Todo,
        }
    ]

*  组件内的守卫

export default {
      //进来之前
      beforeRouteEnter(to, from, next) {
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        console.log("todo before enter", this); //todo before enter undefined
        //可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
        next(vm => {
            // 通过 `vm` 访问组件实例
          console.log("after enter vm.id is ", vm.id);
        });
      },
      //更新的时候
      beforeRouteUpdate(to, from, next) {
        console.log("todo update enter");
        next();
      },
      // 路由离开
      beforeRouteLeave(to, from, next) {
        console.log("todo leave enter");
        const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
          if (answer) {
            next()
          } else {
            //以通过 next(false) 来取消。
            next(false)
          }
      },
      props:['id'],
      components: {
        Item,
        Tabs
      },
      mounted() {
        console.log(this.id)
      },
    };

## 路由懒加载 ##

参考:[路由懒加载][Link 1]

来源：[https://segmentfault.com/a/1190000015976735][https_segmentfault.com_a_1190000015976735]

[Link 1]: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
[https_segmentfault.com_a_1190000015976735]: https://segmentfault.com/a/1190000015976735