• vue组件与路由的使用步骤



    router:根据不同的地址跳转到不同的页面
    一、vue-router的使用
    1.下载路由模块      npm vue-router --save
    2.在router.js中
      先引入路由    import Router from 'vue-router'
      接着通过use在vue全局注册使用    Vue.use(Router)
      最后将路由表导出  export default new router({ })

    3.在main.js中引入路由组件   import router from './router'
    4.以参数的形式写到根目录中 在vue实例对象中声明router  

    5.最后在App.vue的模板中设置路由出口    <router-view></router-view>

    二、添加组件步骤:

    1.在src的components下添加组件 apple.vue
    2.在app.vue的script标签
      引入 新添的组件 import apple from './componets/apple'
      在data后注册每个组件 components:{apple}
      在template标签里用组件名写一个标签<apple></apple>

    3.通过命令npm run dev 运行项目查看组件是否添加成功

    三、将组件添加到路由表的步骤:
    1.安装路由 npm install vue-router --save
    2.将components里的组件引入配置到router.js中
      先引入组件    import...
      再配置路由路径
    3.在main.js中使用router
      先引入路由   import...
      再在vue实例中指定router
    4.在App.vue中模板中添加路由链接 router-link和出口router-view

  • 相关阅读:
    java BufferedImage 合成多张图片
    JQ 输入框控制输入
    SpringBoot读取静态资源文件
    Java获取永久图文素材中的网页端Url
    生成随机32位Token43位asekey
    SQL语句模糊查询年月
    go语言学习笔记3----流程控制
    go语言学习笔记2----变量、常量
    go语言学习笔记1----数据类型
    kettle抽取数据判断是否有数据
  • 原文地址:https://www.cnblogs.com/surui/p/7518095.html
Copyright © 2020-2023  润新知