本文主要為大家詳細介紹了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'),
}
}import router from './router';
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});<template>
<p id="app">
<p class="tab">
<router-link to="/goods" >商品</router-link>
</p>
<router-view></router-view>
</p>
</template> .router-link-active {color: rgb(139,0,0);}
以上是vue-cli中router使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
