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: '',
 components: { App }
});

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

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

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

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