Vue.js如何設置路由

來源：懂視網責編：小采時間：2020-11-27 20:01:08

Vue.js如何設置路由

Vue.js如何設置路由:這次給大家帶來Vue.js如何設置路由，Vue.js設置路由的注意事項有哪些，下面就是實戰案例，一起來看一下。① 路由map在main.js中導入vue-routerimport VRouter from 'vue-router'設置全局路由Vue.use(VRouter)實例化routerl

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue.js如何設置路由:這次給大家帶來Vue.js如何設置路由，Vue.js設置路由的注意事項有哪些，下面就是實戰案例，一起來看一下。① 路由map在main.js中導入vue-routerimport VRouter from 'vue-router'設置全局路由Vue.use(VRouter)實例化routerl

這次給大家帶來Vue.js如何設置路由，Vue.js設置路由的注意事項有哪些，下面就是實戰案例，一起來看一下。

① 路由map

在main.js中導入vue-router

import VRouter from 'vue-router'

設置全局路由

Vue.use(VRouter)

實例化router

let router = new VRouter({ // 如果mode設為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>

實現效果

③ 路由導航

在app.vue文件中,嵌入router-link標簽,該標簽可以實現a標簽的效果

<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>

效果: