好资源导航 » 文章资讯 » vue-cli之router基本使用方法详解

vue-cli之router基本使用方法详解

2023-09-23 03:11:06 57

本文实例为大家分享了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);}

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

返回顶部
514930285
czq8825@qq.com

vue-cli之router基本使用方法详解

热门推荐

随机推荐