vue-router 路由的基本使用（2）

呈现路由下的组件内容

在vue-cli脚手架创建下的文件结构中的App.vue文件会有以下代码，展现当前路由下的视图，即当前路由时什么，这块内容就会被当做当前路由指向的组件内容显示

<div id="app">
  <router-view></router-view>
</div>

以上 <router-view>是作为路由的最高级展现的内容

 <router-view>也可以用来展示当前路由下的子路由的内容，如类似以下CSDN页面就经常容易用到，左边不变，当点击左边列表时，只有右边的内容发生改变，那么右边这块内容就可以使用 <router-view></router-view>，而具体的变化内容可以使用不同的组件作为当前路由的子路由

嵌套子路由

在原路由的属性上多加一个children属性，属性值是一个数组，数组里可以嵌套多个子路由

...
{
      path: '/index',
      component: index,
      children: [
        {
          path: '/content',
          component: content
        },
        {
          path: ':id',
          component: page
        },
      ]
}

当访问到 '/index/content' 的时候，在index组件下的<router-view/>就会显示content组件的内容,也可以用后面的：id路径显示id号而不是组件名

之前的动态路由也是一个父路由下发生内容变化，但是动态路由是指信息内容的变化，大体样式不改变，而子路由一般是用来在同一个父路由下有不同的样式组件，所以两者互不冲突

基本跳转路由

直接使用<router-link></router-link>将你需要点击的内容包裹起来，相当于<a>标签，然后添加属性  to  为想要去的路由（必须和routes中注册的路由相同）

<router-link to="/index">Go to Index</router-link>

 也可以触发click事件：使用this.$router.push()

...
@click='goIndex'
...
goIndex() {
    this.$router.push('/index')                  //默认为path
    this.$router.push(path: '/index') 
    this.$router.push(name: 'index')            //必须是和routes中注册路由的name相同
}

如果是动态路由可以  '/index' 变成  '/index/' + id

传递参数

• path和name分别对应的是query和params，如果不对应，就不会起效果
• query的参数会被作为路径，刷新任然保留，而params的参数会传递到指向路由下，但刷新不会保留

// 命名的路由,即路由有name属性
<router-link :to="{ name: 'index', params: { Id: 123}}">go to Index</router-link>

// 带查询参数，变成 /index?Id=123
<router-link :to="{ path: '/index', query: { Id: 123}}">go to Index</router-link>

// 命名的路由,即路由有name属性
this.$router.push({ name: 'index', params: { userId: 123 }})

// 带查询参数，变成 /index?Id=123
this.$router.push({ path: '/index', query: { Id: '123' }})

进阶 api——路由监听

可以对route变化，即popstate事件触发时，进行观察

• beforeEach可以在当将要跳转页面和离开页面的时候进行一些事件处理

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  if (!loginSuccess) {
      next({ path: '/index' })
  }
  // 确保要调用 next 方法，否则钩子就不会被 resolved
  next()
})

•  afterEach这是监听路由跳转之后的处理，所以已经不需要next了

router.afterEach((to, from) => {
  // ...
})

也可以对单个路由进行路由监听

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

可在配置路由时，同时配置

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

同样，也可以在组件内使用watch监听$route对象,一般放在最外层（因为不是很好维护），作为路由切换的过渡效果，因为这里可以通过this来对组件进行处理

watch: {
  '$route' (to, from) {
    // ...
  }
}

滚动位置(只有当浏览器支持history.pushState才能使用)

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { x: 0, y: 0 };
  }
})