Vue.js如何設(shè)置路由

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:01:08

Vue.js如何設(shè)置路由

Vue.js如何設(shè)置路由:這次給大家?guī)鞻ue.js如何設(shè)置路由，Vue.js設(shè)置路由的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。① 路由map在main.js中導(dǎo)入vue-routerimport VRouter from 'vue-router'設(shè)置全局路由Vue.use(VRouter)實(shí)例化routerl

推薦度：

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

導(dǎo)讀Vue.js如何設(shè)置路由:這次給大家?guī)鞻ue.js如何設(shè)置路由，Vue.js設(shè)置路由的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。① 路由map在main.js中導(dǎo)入vue-routerimport VRouter from 'vue-router'設(shè)置全局路由Vue.use(VRouter)實(shí)例化routerl

這次給大家?guī)鞻ue.js如何設(shè)置路由，Vue.js設(shè)置路由的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

① 路由map

在main.js中導(dǎo)入vue-router

import VRouter from 'vue-router'

設(shè)置全局路由

Vue.use(VRouter)

實(shí)例化router

let router = new VRouter({ // 如果mode設(shè)為history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接訪問. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
 mode: 'history', routes: [ // 做一個映射表
 { path: '/apple', component: Apple
 },
 { path: '/banana', component: Banana
 }
 ]
})
/* eslint-disable no-new */new Vue({ el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

②路由視圖

在app.vue文件中嵌入<router-view></router-view>

<template> <div id="app">
 ![](./assets/logo.png) <!--
 訪問apple的時候,將apple的視圖塞到這個位置
 訪問banana的時候,將banana的視圖塞到這個位置
 -->
 <router-view></router-view>
 </div></template>

實(shí)現(xiàn)效果

③ 路由導(dǎo)航

在app.vue文件中,嵌入router-link標(biāo)簽,該標(biāo)簽可以實(shí)現(xiàn)a標(biāo)簽的效果

<router-link :to="{path:'apple'}">to apple</router-link>

具體使用:

<template>
 <div id="app">
 ![](./assets/logo.png) <!--
 訪問apple的時候,將apple的視圖塞到這個位置
 訪問banana的時候,將banana的視圖塞到這個位置
 -->
 <router-view></router-view>
 <router-link :to="{path:'apple'}">to apple</router-link>
 <router-link :to="{path:'banana'}">to banana</router-link>
 </div></template>

效果: