Vue的Router是一個用于實現頁面跳轉和路由管理的插件。它可以幫助我們根據不同的URL請求加載不同的組件，以及實現前端路由功能。在使用Vue的Router時，需要對它進行基本配置。下面將詳細介紹Vue的Router基本配置命令，并附上具體的代碼示例。

安裝Vue Router
使用npm安裝Vue Router，打開終端并在項目目錄下執行以下命令：

npm install vue-router

導入Vue Router
在main.js文件中導入Vue Router，并使用Vue.use方法將其注冊為Vue的插件：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

創建路由實例
在main.js文件中創建一個路由實例，并配置路由規則：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history', // 使用HTML5的history模式，去除URL中的"#"
  routes
})

掛載路由實例
在main.js文件中將路由實例掛載到Vue實例上：

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

配置路由出口
在Vue的根組件中，通過標簽來顯示路由對應的組件：

<template>
  <div>
 <router-view></router-view>
  </div>
</template>

通過上述配置，我們就完成了Vue的Router的基本配置。下面是一個完整的示例：

首先，在src/components目錄下創建兩個組件，Home.vue和About.vue。

Home.vue內容如下：

<template>
  <div>
    <h2>Welcome to Home Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

About.vue內容如下：

<template>
  <div>
    <h2>Welcome to About Page</h2>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

然后，在src/router目錄下創建index.js文件，內容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

最后，在src/main.js文件中進行如下配置：

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

#路由#實例
點贊 收藏 分享到：
聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至201542412@QQ.com舉報，一經查實，本站將立刻刪除。