• 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

  • 相关阅读:
    2018 我要告诉你的 Vue 知识大全
    探究Javascript模板引擎mustache.js使用方法
    高性能JavaScript模板引擎实现原理详解
    junit报错
    http报文
    web应用和http协议
    eclipse首次使用基本设置
    利用亚马逊AWS搭建个人服务器
    图文详解 IntelliJ IDEA 15 创建普通 Java Web 项目
    MyEclipse 设置条件断点
  • 原文地址:https://www.cnblogs.com/surui/p/7518095.html
Copyright © 2020-2023  润新知