Vue 路由 Vue-Router
阿新 • • 發佈：2020-07-29
Vue 路由 Vue-Router
什麼是路由
Vue Router 是 Vue 官方提供的路由管理器，他和 Vue 的核心深度整合，讓構建單頁面應用變得非常簡單，通過根據不同的請求路徑，切換顯示不同元件進行渲染頁面。
基本路由使用
安裝路由
注意：使用路由首先要安裝模組
npm install vue-router
引入 vue-router.js
<script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vue-router/dist/vue-router.js"></script>
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>路由</title> </head> <body> <div id="app"> <div class="header"> <h1>頭部</h1> </div> <div class="left"> <p> <ul> <li><a href="#/foo">go foo</a></li> <li><a href="#/bar">do bar</a></li> <!-- 官方推薦 通過 router-link 標籤預設會渲染出來 a 標籤 其中通過 to 屬性來指定跳轉的連結， 不用帶上#號 --> <li> <router-link to="/foo">go foo</router-link> </li> <li> <router-link to="/bar">do bar</router-link> </li> </ul> </p> </div> <div class="main"> 主頁面 <!-- 路由出口 --> <!-- 路由匹配到的元件將渲染在這裡 --> <router-view></router-view> </div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vue-router/dist/vue-router.js"></script> <script> // 1. 定義元件 const Foo = { template: '<div> 我是 Foo 元件 </div>' } const Bar = { template: '<div> 我是 Bar 元件 </div>' } // 2. 配置路由表：當點選指定的url的時候，顯示對應的元件 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] }) new Vue({ el: '#app', data: { }, router // router:router }) </script> </body> </html>