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 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
微信小程序 navbar实例详解
May 11 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
总结一些js自定义的函数
2006/08/05 Javascript
又一个图片自动缩小的JS代码
2007/03/10 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
js确定对象类型方法
2012/03/30 Javascript
script标签属性用type还是language
2015/01/21 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python requests上传文件实现步骤
2020/09/15 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
《湘夫人》教学反思
2014/02/21 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
作文批改评语大全
2014/04/23 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
小学少先队活动总结
2015/05/08 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
小学毕业教师寄语
2019/06/21 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android