Vue-router编程式导航及命名视图

不能停,一停下来就忘了。

this.$router 是编程式导航的核心
1.this.$router.push,参数为{ name: 'pathName', params: { anhao: "zzz" },必须使用name属性倒赔params否则获取不到参数,query可以使用name或path作为导航配置。params传递参数后刷新依旧是无法获取到的。该方法会保留history记录。
2.this.$router.replace,与push方法相同,唯一区别,不会保留历史记录。
3.this.$router.go(n),历史记录跳转前进或后腿。如果超出历史记录范围则无任何效果。
命名视图
之前说的一个路由的router-view对应一个component这个说法并不全队,这个前提是建立在路由配置中没有配置多个component。
const routes = [
  {
    path: '/home',
    components: {
      default: Content, // 这个是Content组件
      Header: Header,  // 这个是Header组件
      Footer : Footer // 这个是Footer 组件
    }
  }
]

对应的视图出口会多一个name属性来表明对应那一个组件,如下

<router-view name="Header"></router-view> // 对应Header组件
<router-view></router-view> // 对应default只想的Content组件
<router-view  name="Footer"></router-view> // 对应Footer组件

理解起来比较简单,运用得结合具体场景(基本你能做的我都能嵌套路由搞定)。


关于作者

xlynn
获得点赞
文章被阅读