zoukankan      html  css  js  c++  java
  • vue中路由的使用

    路由:

      (1)监听地址栏的变化

      (2)根据地址栏的变化切换到对应的组件

    使用路由:

    1、创建一个vue项目:vue create routerdemo

      注意:在选择插件的时候只选择babel

      

    2、安装路由插件:npm install vue-router

    3、创建路由:src下新建router.js,抛出router实例

    import Vue from "vue";// 引入vue
    import Router from "vue-router";// 引入vue-router
    Vue.use(Router);// 使用路由
    
    import Recommend from "./Recommend.vue";// 引入Recommend组件
    import Singer from "./Singer.vue";// 引入Singer组件
    
    const router=new Router({// 实例化router对象
        mode:"hash",// 使用hash路由,带#号
        routes:[// 路由的配置项
            {path:"/recommend",component:Recommend},// recommend路径对应Recommend组件
            {path:"/singer",component:Singer},// singer路径对应Singer组件
        ]
    });
    
    export default router;// 抛出路由

    4、使用路由:js的入口文件main.js中引入并使用  

      

     5、在根组件App.vue中  router-view  开辟一块空间:

     

     6、地址栏后面输入路径显示对应的组件:

      

        插一句:3002的端口号是在vue.config.js中配置的:

        module.exports={
            devServer:{
                port:3002
            }
        }

    7、router-link标签,点击跳转  

            <router-link to="/recommend" tag="div" activeClass="active">推荐</router-link>
            <router-link to="/singer" tag="div" activeClass="active">歌手</router-link>
     
              to:跳往的路径
              tag:要渲染成的标签,默认是a标签
              activeClass:当前标签添加类名

        

       

  • 相关阅读:
    SpringMVC之文件上传
    Spring之jdbc【继承JdbcDaoSupport】
    Spring中jdbcTemplate的用户实例
    SpringMVC之数据存储
    SpringMVC的日期转换
    SpringMVC配置解决中文乱码的过滤器
    【对数据库操作的封装成工具类之jdbc】
    实现用户注册与登入功能的案例
    【反射之Field】获取字段
    Can't get WebApplicationContext object from ContextRegistry.GetContext(): Resource handler for the 'web' protocol is not defined
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12269143.html
Copyright © 2011-2022 走看看