vue 路由

本文介绍了Vue.js路由的基础使用流程,包括引入vue-router.js、定义路由组件、配置路由表、创建路由对象以及在模板中使用<router-link>进行路由跳转。同时讲解了路由的原理,分为hash模式和history模式,并详细阐述了动态路由的定义和参数传递方式,包括通过query和params进行参数传递。通过示例代码,帮助读者理解如何在实际项目中应用Vue.js的路由功能。
摘要由CSDN通过智能技术生成

路由的基础使用流程

  1. 引入 vue-router.js  (在 vue.js 之后)

  2. 定义相关的路由组件(定义方式与普通组件相同,只需要通过路由来跳转)
  3. 进行路由配置(路由表)
     let routes =[
          {path:'/',redirect:'/index'},
          {path:'/index',component:Index},
          {path:'/find',component:Find},
          {path:'/order',component:Order},
          {path:'/my',component:My},
          {path:'/flower',component:Flower},
          {path:'/detail/:id',component:Detail},
          
        ];
  4. 新建路由对象,并进行配置
    let router = new VueRouter({
          mode:"hash",//默认hash模式,可切换至history
          // 配置路由数组
          routes:routes
        })
  5. 在vue组件实例中配置路由
    var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router:router
          
        });
  6. 在模板中展示路由组件的位置,设置<router-view>
  7. 通过 router-link 标签中的to属性 实现路由跳转(默认解析为a标签,可以用tag属性改变为其他标签)
    <router-link to="/index" tag="p">首页</router-link>
    <router-link to="/find" tag="p">发现</router-link>

路由的原理:

  1. 当mode 设置值为hash时:当url地址的hash值改变时,就会去路由表中进行匹配,进而找到路由对应的组件,将组件的模板渲染到router-view对应的位置    (url中带有#)
  2. 当mode 设置为history时,原理是利用HTML5中的history对象的新API  ----history.pushState 来实现路由切换(url中不带#)

 动态路由:

允许接收参数的路由成为动态路由,,对应 的组件成为动态路由组件

定义动态路由:

路由跳转的两种方式:

声明式导航:

通过<router-link>组件实现路由跳转

 步骤:

1.配置路由

2.通过通过<router-link>组件实现路由跳转

3.在组件中接收参数

通过query传参

1.如果通过query

通过路由名称跳转

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值