vue-cli之router基本使用方法詳解
更新時(shí)間：2017年10月17日 10:12:44 作者：昔有木如蓋
這篇文章主要為大家詳細(xì)介紹了vue-cli之router基本使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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里修改的配置，目的是每一次引入組件之類的文件都要寫(xiě)相對(duì)路徑太麻煩，直接用@代替即可，配置修改如下
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>
如果有比如商品、商家、評(píng)論三個(gè)點(diǎn)擊切換路由，要想設(shè)置當(dāng)前點(diǎn)擊的某個(gè)節(jié)點(diǎn)的樣式，可以設(shè)置
.router-link-active {color: rgb(139,0,0);}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vuex中使用modules時(shí)遇到的坑及問(wèn)題
這篇文章主要介紹了vuex中使用modules時(shí)遇到的坑及問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
今天小編就為大家分享一篇vue獲取form表單的值示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要給大家介紹了關(guān)于你不可不知的Vue.js列表渲染的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
在前端開(kāi)發(fā)中,獲取登錄用戶的用戶名是一項(xiàng)常見(jiàn)的需求,這篇文章主要給大家介紹了關(guān)于前端Vue如何獲取登錄的用戶名或用戶id的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
element-ui中頁(yè)面縮放時(shí)table表格內(nèi)容錯(cuò)位的解決
這篇文章主要介紹了element-ui中頁(yè)面縮放時(shí)table表格內(nèi)容錯(cuò)位的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue-calendar-component 封裝多日期選擇組件的實(shí)例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
本篇文章主要介紹了Vue鍵盤(pán)事件用法總結(jié)，詳細(xì)的介紹了各種鍵盤(pán)事件的用法，有興趣的可以了解一下2017-04-04
Vue組件化(ref,props,?mixin,.插件)詳解
這篇文章主要介紹了Vue組件化(ref,?props,?mixin,?插件)的相關(guān)知識(shí),包括ref屬性，props配置項(xiàng)及mixin混入的方式，本文通過(guò)示例代碼多種方式相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
layer.js(mobile)是一個(gè)小巧方便的彈出層插件，在之前的apicloud項(xiàng)目中被大量使用，但最近對(duì)apicloud的IDE、非常不友好的文檔和極低的開(kāi)發(fā)效率深感厭煩，決定棄用然后轉(zhuǎn)向Vue開(kāi)發(fā)。這篇文章主要介紹了vue-cli腳手架引入彈出層layer插件的幾種方法，需要的朋友可以參考下2019-06-06
Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問(wèn)題的方法
本文主要介紹了Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問(wèn)題的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06