vue-cli之router基本使用方法详解
本文实例为大家分享了vue-cli之router基本使用的具体代码,供大家参考,具体内容如下
1、在src目录下新建router目录,再建立index.js
importVuefrom'vue'; importVueRouterfrom'vue-router'; importgoodsfrom'@/components/goods/goods'; Vue.use(VueRouter); exportdefaultnewVueRouter({ 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里引入并挂载到节点上
importrouterfrom'./router'; /*eslint-disableno-new*/ newVue({ el:'#app', router, template:'', components:{App} });
3、在例如App.vue文件中使用,点击即可切换路由,内容则呈现在router-view容器中
商品
如果有比如商品、商家、评论三个点击切换路由,要想设置当前点击的某个节点的样式,可以设置
.router-link-active{color:rgb(139,0,0);}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。