VUE全家桶 Vue-router 知识点备忘

export default new Router({
    // 去掉地址栏的# hash 但当刷新页面路径时 服务端没有配置对应的页面的话就会出错
  mode: 'history',
  // 路由跳转时选中的样式
  linkActiveClass: 'active-link',
  //严格匹配 路由路径 只有完全正确才会显示对应样式
  linkExactActiveClass: 'exact-active-link',
  // 浏览器滚动位置的定义 to 要去的页面 from 来自的页面 savedPosition 滚动的位置 
  // 可以实现 页面跳转之后 回来还在调走之前的滚动位置这一功能
  scrollBehavior(to, from, savedPosition) {
    // console.log('to:', to);
    // console.log('from:', from);
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        x: 0,
        y: 0
      }
    }
  },
  // query url 携带的参数 parseQuery 把参数转换成对象
  parseQuery(query) {},
  // query url 携带的参数 stringifyQuery 把参数转换成字符串
  stringifyQuery(obj) {},
  // 当浏览器不支持 history时 会自动回到hash 方式
  fallback: true, 
  // 所有通过router API 的地址都会在浏览器中添加上base所指定的地址名称 
  // 非强制使用 即使去掉也可正常跳转 不常使用
  base:'/base/', 
  routes: [{
      // 跳转的路径
      path: '/',
      // 路由命名 和path 没有关系  可以根据名字进行跳转
      // <router-link :to="{name:'login'}">通过名字跳转</router-link>
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'login',
      component: login,
      // 保存路由信息 关于SEO优化
      meta: {
        title: 'this is app',
        description: 'asdasd'
      },
      //子路由
      children: [{
        path: 'test',
        component: HelloWorld
      }]
    },
    {
      path: '/user/:id',
      // props: true, 
      // props: {
      //   id: 456
      // },
      props: (route) => ({
        // 接受一个值 就是路由的 $route对象
        // 就可以取到query 的值了 另外也可以做很多别的事情
        id: route.query.b
      }),
      name: 'user',
      component: user,
    }
  ],
 
})

路由传参：使用场景 例如商品详情页 可以服用详情页 只需要根据传进来的值来显示对应的数据 如果使用可以配合 props 来进行解耦

{
      path: '/user/:id',
      props: {
        props形式1: true,
        props形式2: {id: 456},
        props形式3: (route) => ({id: route.query.b})
      },
      name: 'user',
      component: user,
    }

• 形式1 使用 props: true 可以让:id 的值 当做props 参数被传递到对应路有 user => props: ["id"], 可以直接使用 props 可以自定义数值
  在组件中使用 this.$route 来指定使用的值 会导致组件和路由被绑定,增加了耦合性,如果配合props 来进行使用就可规避这一点 传值只需要当做参数即可
• 形式2 指定props值 *注意:* 想要去到值router-link 需要设置 组件内props也需要接收
• 形式3 表明了可以使用函数的方式来制定要传递的对象 玩法超多

命名视图

使用情景: 例如三栏布局 当需要进行大的显示切换时可以使用(右侧视图不变 但左侧进行更换)
html：添加name 属性

  <router-view name="a"></router-view>
  <router-view ></router-view>

js:component 改为 components

components: {
        default: user, // 默认的view
        a: login // 对应路有name
      },

路由导航守卫

1. 全局导航守卫

参数解释 :

• to: 去往的页面
• from: 来自的页面
• next: 执行跳转的函数
• next 参数 :
  • next('/login') 要跳转的路径
  • next({path:'/login',replace}) routes中的对象属性

beforeEach : 在跳转之前进行判断

使用场景 : 如权限页面 进行登录验证

router.beforeEach((to, from, next) => {
console.log('beforeEach');
next()
})

beforeResolve : 跳转成功

router.beforeResolve((to, from, next) => {
console.log('beforeResolve');
next()
})

afterEach : 跳转之后

router.afterEach((to, form) => {
console.log('afterEach');
})

2. 路由独享导航守卫

beforeEnter 进入路由之前

beforeEnter(to, from, next) {
console.log('路由配置 beforeEnter');
next()
},

3. 组件内的导航守卫

beforeRouteEnter 组件进入路由前

beforeRouteEnter(to, from, next) {
next(vm => console.log("通过 vm 访问组件实例"));
}

注意事项:

• 在渲染该组件的对应路由被 confirm 前调用
• 不！能！获取组件实例 this
• 因为当守卫执行前，组件实例还没被创建
• 在next 中传入一个回调 就可以获取组建的实例l

beforeRouteLeave 组件路由离开

使用场景: 如页面有很多表单数据 用户点击其他路由时可以给出提醒确认是否离开

beforeRouteLeave(to, from, next) {
if (global.confirm("queidng ?")) {
next();
}
}

注意事项:

• 导航离开该组件的对应路由时调用
• 可以访问组件实例 this

brforRouteUpdate 路有改变但是组件不变时进行更新

使用场景: 如需要通过 /foo/:id 的形式来在同一个组件更改数据时在这个钩子里进行数据验证报错等

brforRouteUpdate(to, from, next) {
console.log("login beforeUpdate");
next();
}

注意事项:

• 在当前路由改变，但是该组件被复用时调用
• 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
• 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
• 可以访问组件实例 this

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

异步路由

使用场景 : 加快加载速度 把不是第一时间需要展示的代码逻辑 放到需要时再去加载

1. 安装 : npm i babel-plugin-syntax-dynamic-import -D
2. .babelrc 中添加插件

{
"plugins": [
  "transform-runtime",
  "syntax-dynamic-import" //这里添加
]
}