vue-cli中router使用方法

本文主要為大家詳細介紹了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';

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: &#39;<App/>&#39;,
 components: { App }
});

3、在例如App.vue檔案中使用，點擊即可切換路由，內容則呈現在router-view容器中

<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-router路由基礎實例分享

Router解決跨模組下的頁面跳躍

vue router仿天貓底部導覽列實例分享

以上是vue-cli中router使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！