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


Posted in Javascript onOctober 17, 2017

本文实例为大家分享了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);}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 #Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 #Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 #Javascript
javascript 中模板方法单例的实现方法
Oct 17 #Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 #Javascript
react中的ajax封装实例详解
Oct 17 #Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 #Javascript
You might like
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python GAE、Django导出Excel的方法
2008/11/24 Python
python 生成目录树及显示文件大小的代码
2009/07/23 Python
Python 统计字数的思路详解
2018/05/08 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Python grpc超时机制代码示例
2020/09/14 Python
shell变量的作用空间是什么
2013/08/17 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
小学生自我鉴定
2013/10/12 职场文书
社区交通安全实施方案
2014/03/22 职场文书
员工工作表现自我评价
2015/03/06 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书