Vue Router的基本使用

Vue Router

路由传参

第一种:params传参

    {
        path: '/tododetail/:todo_id',
        name: 'tododetail', //命名路由
        component: TodoDetail
    },

//编程式导航
   goToDetail(id){
     this.$router.push(`/tododetail/${id}`)
  }

//声明式导航
  <router-link :to='{name:"tododetail",params:{todo_id:todo.id}}'>
    {{todo.content}}
  </router-link>

//详情页中获取参数
{{$route.params.todo_id }}

第二种:query传参

    {
        path: '/tododetail', //路由中没有显示参数的地方，但实际页面中有展示参数。如果写参数，无法匹配到，会404
        name: 'tododetail',
        component: TodoDetail
    }

//编程式导航
 goToDetail(id){
    this.$router.push({
        path: '/tododetail',
        query:{
            todo_id:id
        }
    })
}



//声明式导航
 <router-link :to='{name:"tododetail",query:{todo_id:todo.id}}'>
          {{todo.content}}
 </router-link>

//详情页中获取参数
{{$route.query.todo_id }}

嵌套路由

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

重定向

{
    path: '/', // 重定向到home页面
    redirect: '/home',
}

导航守卫

路由元信息

数据获取

滚动行为

路由懒加载