vue-cli之router基本使用方法详解
2017-10-17 10:12
1061 查看
本文实例为大家分享了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);}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- vue-cli之router基本使用
- Vue.js路由组件vue-router使用方法详解
- Vue.js路由vue-router使用方法详解
- 详解vue-router基本使用
- 详解vue-cli 本地开发mock数据使用方法
- Vue中fragment.js使用方法详解
- Fragment详解之二——基本使用方法
- Android组件ViewStub基本使用方法详解
- 详解handlebars+require基本使用方法
- Fragment详解之二——基本使用方法
- [深入学习C#]LINQ查询表达式详解(1)——基本语法、使用扩展方法和Lambda表达式简化LINQ查询
- H5+Mui文件配置 vue-resource基本使用方法
- 详解python中的json的基本使用方法
- Redis 详解,基本方法使用
- 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
- 详解iOS App中UISwitch开关组件的基本创建及使用方法
- linux tail命令的使用方法详解 和 Linux 服务器查看日志基本命令
- Fragment详解之二——基本使用方法
- Fragment详解之二——基本使用方法