Vue路由基本内容 - Githubissues

LastPoem commented 5 years ago

Vue路由作用：路由用于设定访问路径，把路径和组件映射起来。因为在vue单页面应用中，一个页面实际上就是一个组件。

1.基本使用 使用router-link to类似于a标签（本身就被渲染成a标签），to属性是要跳转的组件。跳转的组件渲染到上。其它内容不变。

router-view是组件渲染的地方。

2.路由默认值 在router配置中，使用重定向改变默认

    {
      path: "",
      redirect: "/Login"   // 需要的默认页面
    },

3.去除路径中#的方法：在router配置中加入： mode: "history"

4.router-link其他属性： tag属性：可以指定把渲染成什么标签。比如渲染成button标签： tag = "button"

replace属性：直接添加replace，就没有historystate历史记录

active-class：当router-link 对应的路由匹配成功时，会自动给当前元素设置一个 router-link-active的class。 active-class可以改变默认的名称。也可以在路由配置里用LinkActiveClass设置。

5.编程式路由：通过代码跳转路由this.$router.push("/路径") 或者this.$router.replace

6.动态路由 在某些情况下，要跳转的页面不确定，此时需要动态路由。比如： /user/zhangsan 或者 /user/lisi

实现动态路由：首先在路由配置里： { path: '/user/:id', component: User } 然后在router-link里绑定to属性，并在user/后来一个变量以实现动态路由

可以用this.$route.params.id 来访问路径所配置的id 注意router和route。

7.路由嵌套 比如在/home路径下同时又有home/news和home/message这两个路径。它们是home的子路径。在路由配置中， children里的path不能有/

home路径中配置children: [{
  path: "news",
component: ()=> import （"路径"）
  },{
  path: "message"
  }]

注意：嵌套路由中也有默认路径。在嵌套的组件中也要用router-view作为容器显示组件。

8.路由传递参数 传递参数有两种类型： params 和 query.

params的类型： /router：id 传递方式：在path后加上对应的值。比如 /router/zhangsanID. （动态路由就使用params.）然后再组件中通过this.$route.params.id来访问

query的类型：/router 传递方式：对象中使用query的key作为传递方式、传递后的路径：/router？id=zhangsanID 具体操作：在router-link 中绑定to属性，

this.$route.query **9.懒加载** 再配置路由时，每个路径下的component: ( )=> import ("路径") **10.$router和$route的区别** this.$router实际上和在router文件中创造的全局router路由实例是同一个对象。 this.$route表示当前路由信息对象。表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。路由信息对象：即$router会被注入每个组件中，可以利用它进行一些信息的获取。

LastPoem commented 5 years ago

关于导航守卫的补充： to:即将进入的路由对象。 from：即将离开的路由对象。 meta:（元数据，描述数据的数据）

前置守卫必须要主动调用next()方法（因为已经跳转过了）后置钩子就不必要 router.afterEach((to, from)=>{ next(false) //中断当前导航 }) 以上的守卫和钩子称为全局守卫

路由独享守卫：在路由配置上直接用beforeEnter。和全局前置守卫一样的用法 beforeEnter: (to, from, next)=>{ next() //也要必须使用next }

组件内守卫：在组件内可以直接使用以下： beforeRouteEnter beforeRouteUpdate beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

LastPoem commented 5 years ago

keep-alive和它的两个钩子函数。

keep-alive: 当组件内还包含组件，然后返回的时候会重新创建内部组件。即无法保存内部组件的状态。 router-view也是一个组件，如果直接被包在keep-alive里面所有路径匹配到的视图组件都会被缓存。

keep-alive也是Vue的一个组件，可以使被包含的组件保留状态，或防止被重新渲染。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 keep-alive对应两个生命周期activated和deactivated。当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。当从缓存中读取a组件时，此时a组件处于活跃状态，当从缓存中读取b组件时，a组件处于缓存状态，此时b组件处于活跃状态。用途： eg:当在a组件浏览小说到某个位置，这时，我切换到b组件，那么就用a组件的缓存状态函数记录这个位置（），当我再次切换到a组件，用活跃状态函数保存到该位置 keep-alive的两个属性： include -字符串或正则表达式，只有匹配到的组件会被缓存 exclude-字符串或正则表达式，任何匹配到的组件都不会被缓存

LastPoem commented 5 years ago

利用meta属性在每个路径中设置meta

{
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true // 需要被缓存的组件，不需要就用false
 },

LastPoem / Notes

Vue路由基本内容 #37