脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-cli之router基本使用

vue-cli之router基本使用方法详解

 更新时间：2017年10月17日 10:12:44   作者：昔有木如盖  
这篇文章主要为大家详细介绍了vue-cli之router基本使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue-cli之router基本使用的具体代码，供大家参考，具体内容如下

1、在src目录下新建router目录，再建立index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from '@/components/goods/goods';

Vue.use(VueRouter);

export default new VueRouter({
 routes: [
  {
   path: '/',
   redirect: {name: 'goods'}
  }
});

代码中@是在webpack.base.conf.js里修改的配置，目的是每一次引入组件之类的文件都要写相对路径太麻烦，直接用@代替即可，配置修改如下

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 }

2、入口文件main.js里引入并挂载到节点上

import router from './router';

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
});

3、在例如App.vue文件中使用，点击即可切换路由，内容则呈现在router-view容器中

<template>
 <div id="app">
  <div class="tab">
    <router-link to="/goods" >商品</router-link>
  </div>
  <router-view></router-view>
 </div>
</template>

如果有比如商品、商家、评论三个点击切换路由，要想设置当前点击的某个节点的样式，可以设置

 .router-link-active {color: rgb(139,0,0);}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vuex中使用modules时遇到的坑及问题

    vuex中使用modules时遇到的坑及问题

    这篇文章主要介绍了vuex中使用modules时遇到的坑及问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue获取form表单的值示例

    vue获取form表单的值示例

    今天小编就为大家分享一篇vue获取form表单的值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 你不可不知的Vue.js列表渲染详解

    你不可不知的Vue.js列表渲染详解

    这篇文章主要给大家介绍了关于你不可不知的Vue.js列表渲染的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-10-10
  • 前端Vue如何获取登录的用户名或用户id代码实例

    前端Vue如何获取登录的用户名或用户id代码实例

    在前端开发中,获取登录用户的用户名是一项常见的需求,这篇文章主要给大家介绍了关于前端Vue如何获取登录的用户名或用户id的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • element-ui中页面缩放时table表格内容错位的解决

    element-ui中页面缩放时table表格内容错位的解决

    这篇文章主要介绍了element-ui中页面缩放时table表格内容错位的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue-calendar-component 封装多日期选择组件的实例代码

    vue-calendar-component 封装多日期选择组件的实例代码

    这篇文章主要介绍了vue-calendar-component 封装多日期选择组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-12-12
  • Vue键盘事件用法总结

    Vue键盘事件用法总结

    本篇文章主要介绍了Vue键盘事件用法总结，详细的介绍了各种键盘事件的用法，有兴趣的可以了解一下
    2017-04-04
  • Vue组件化(ref,props, mixin,.插件)详解

    Vue组件化(ref,props, mixin,.插件)详解

    这篇文章主要介绍了Vue组件化(ref, props, mixin, 插件)的相关知识,包括ref属性，props配置项及mixin混入的方式，本文通过示例代码多种方式相结合给大家介绍的非常详细，需要的朋友可以参考下
    2022-05-05
  • vue-cli脚手架引入弹出层layer插件的几种方法

    vue-cli脚手架引入弹出层layer插件的几种方法

    layer.js(mobile)是一个小巧方便的弹出层插件，在之前的apicloud项目中被大量使用，但最近对apicloud的IDE、非常不友好的文档和极低的开发效率深感厌烦，决定弃用然后转向Vue开发。这篇文章主要介绍了vue-cli脚手架引入弹出层layer插件的几种方法，需要的朋友可以参考下
    2019-06-06
  • Vue-Cli配置代理转发解决跨域问题的方法

    Vue-Cli配置代理转发解决跨域问题的方法

    本文主要介绍了Vue-Cli配置代理转发解决跨域问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06

最新评论