zoukankan      html  css  js  c++  java
  • Vue基础篇 (1) —— Vue-Router的使用

    Vue-Cli中Vue-Router的使用

    一、创建vue-cli的项目

    npm create myproject

      vue create 为vue.js 3.0构建项目的命令,2.0版本可以通过vue init webpack myproject

    二、安装vue-router

    npm install vue-router --save

    三、在目录结构的src下创建router文件夹,并创建index.js作为出口文件,同时在components文件下新建两个组件

    四、在router/index.js配置相关路由

      这里我配置了三个路由,'/hello','/a','/b',并且把 '/' 重定向为 ‘/hello’

     五、在src/main.js中将路由实例挂载到vue根实例上,使得整个应用都有路由功能

     

    六、在src/App.vue中使用router-link 标签实现跳转路由、使用router-view来实现路由显示

    七、最终效果

     

  • 相关阅读:
    mysql的锁
    设计模式相关
    分布式缓存
    myBatis相关
    mevan相关
    Java 一些缩写的解释
    Spring相关
    Java中PreparedStatement和Statement的用法区别
    Java线程池
    spring中的事务传播机制
  • 原文地址:https://www.cnblogs.com/lcxcsy/p/12067225.html
Copyright © 2011-2022 走看看