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 相关文章推荐
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
教你用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提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
php模板原理讲解
2013/11/13 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
Python制作爬虫采集小说
2015/10/25 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python异常触发及自定义异常类解析
2019/08/06 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
C语言笔试题回忆
2015/04/02 面试题
学生就业推荐信
2013/11/13 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
购房个人委托书范本
2014/10/11 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记