本文实例为大家分享了vue-cli之路由器基本使用的具体代码,供大家参考,具体内容如下
1,在src目录下新建路由器目录,再建立index.js
从“进口Vue Vue ';
从“进口VueRouter vue-router ';
进口货物从“@/组件/商品/货物”;
Vue.use (VueRouter);
出口默认新VueRouter ({
路线:[
{
路径:“/?
重定向:{名称:‘货物’}
}
}）;
之前
代码中@是在webpack.base.conf.js里修改的配置,目的是每一次引入组件之类的文件都要写相对路径太麻烦,直接用@代替即可,配置修改如下
解决:{
扩展:['。js ', '。vue ', ' . json),
别名:{
“vue美元”:“vue/dist/vue.esm.js”,
“@”:解决(“src”),
}
}
之前
2,入口文件main.js里引入并挂载到节点上
从“进口路由器。/路由器”;/* eslint-disable没有新*/新Vue ({
埃尔:“#应用”,
路由器,
模板:& lt; App/祝辞,
组件:{应用}
}）;
之前
3,在例如App.vue文件中使用,点击即可切换路,由内容则呈现在router-view容器中
& lt; template>
& lt; div id=坝τ谩北?
& lt; div类=把∠羁ā北?
& lt; router-link="/商品”在商品& lt;/router-link>
& lt;/div>
& lt; router-view> & lt;/router-view>
& lt;/div>
& lt;/template>
之前
如果有比如商品,商家,评论三个点击切换路由,要想设置当前点击的某个节点的样式,可以设置
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
