本文實(shí)例為大家分享了vue-cli之router基本使用的具體代碼,供大家參考,具體內(nèi)容如下
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里引入并掛載到節(jié)點(diǎn)上
import router from './router'; /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } });
3、在例如App.vue文件中使用,點(diǎn)擊即可切換路由,內(nèi)容則呈現(xiàn)在router-view容器中
<template> <div id="app"> <div class="tab"> <router-link to="/goods" >商品</router-link> </div> <router-view></router-view> </div> </template>
如果有比如商品、商家、評論三個(gè)點(diǎn)擊切換路由,要想設(shè)置當(dāng)前點(diǎn)擊的某個(gè)節(jié)點(diǎn)的樣式,可以設(shè)置
.router-link-active {color: rgb(139,0,0);}
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com