vue-router基本教程

最新推荐文章于 2024-11-06 08:00:33 发布

原创最新推荐文章于 2024-11-06 08:00:33 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍 Vue Router 的多种传参方式及子路由配置方法，并演示如何实现路由跳转。此外，还提供了通过路径名和参数进行导航的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-router基本教程

上一篇介绍了大概使用方式 vue-router开端

vue-router传参

方式一：

    {
      path: '/user/:name/:age',
      name: 'user',
      component: User
    }
    // 传参
    <router-link to="/user/大海">大海</router-link>
    // 获取参数
    {{$route.params.name}}

方式二：

    {
      path: '/user',
      name: 'user',
      component: User
    }
    // 通过连接地址传参
    // http://localhost:8089/#/user/大海?age=10
    // 获取参数
    {{$route.query.age}}

子路由

在要设置子路由的模板里操作

    <router-link to="/user/more">更多信息</router-link>
    // 同样可以使用这样的方式 <router-link to="more" append >更多信息</router-link>
    // 当父路由有参数需要传时，子路由的跳转就不固定了，就可以使用下面这种方式直接在父路由最后追加
    // 同样也可以使用绑定的方式动态设置 <router-link :to="'/user/'+$route.params.name+'/more'" append >
    <router-view></router-view>
    // 配置路由
    {
      path: '/user/:name',
      name: 'user',
      component: User,
      children: [
        {
          path: 'more',
          component: Child
        }
      ]
    }

在子路由中同样可以获取到传递的参数，包括父路由的

路由跳转

click() {
    // 根据路由跳转
    this.$router.push('/about');
    // 根据路由名称跳转 传参 ！！ 注意这里没有path
    this.$router.push({name: 'user', params: {name: '大海',age: 12}})
}