时间:2021-05-26
本文实例为大家分享了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';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);}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了Vue-CLI与Vuex使用方法。分享给大家供大家参考,具体如下:1、通过Vue-CLI创建项目Vue-CLI是Vue用于创建Vue项目的脚手架工
项目下载地址vue-cli多页面多路由项目示例:vue+webpack+vue-router+vuex+mock+axiosUsageThisisaprojec
本文介绍了vue使用vue-cli快速创建工程,分享给大家,具体如下:vue-cli安装npmivue-cli-gvueinitwebpack-simplevu
vue-cli是vue.js的脚手架,用于自动生成vue.js模板工程的。1、安装vue-cli使用npm全局安装vue-cli(前提是已经安装了nodejs,
一、配置Router用vue-cli创建的初始模板里面,并没有vue-router,需要通过npm安装cnpmivue-router-D安装完成后,在src文件