<nav id="06uq0"></nav>

<rt id="06uq0"></rt>

點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

vue-cli之router基本使用方法詳解

來源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 22:27:43

vue-cli之router基本使用方法詳解

本文實(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'} }})。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀本文實(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'} }})。

本文實(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里修改的配置，目的是每一次引入組件之類的文件都要寫相對(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);}

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue-cli之router基本使用方法詳解

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： VUE vu 詳解vue

熱門焦點(diǎn)

vue-cli之router基本使用方法詳解

vue-cli之router基本使用方法詳解

vue-cli之router基本使用方法詳解

最新推薦

猜你喜歡

熱門推薦