Vue-router的用法與使用步驟
阿新 • • 發佈：2020-09-07
Vue-router的使用步驟：
Vue-router的使用方法 程式碼如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入順序不能亂 --> <script src="./vue_2.5.22.js"></script> <script src="./vue-router_3.0.2(1).js"></script> </head> <body> <!-- 被VM例項所控制的區域 --> <div id="app"> <!-- router-link是Vue中提供的標籤 預設會被渲染為a標籤 to屬性預設會被渲染為href屬性 to屬性的值預設會被渲染為#開頭的hash地址 --> <router-link to='/user'>User</router-link> <router-link to='/register'>Register</router-link> <!-- 路由填充位(也叫作佔位符) 將來通過路由規則匹配到的元件，將會被渲染到router-view所在的位置 --> <router-view></router-view> </div> <script> // 建立路由組建 const User = { template: '<h1>User 元件</h1>' } const Register = { template: '<h1>regiter 元件</h1>' } // 建立路由例項物件 const router = new VueRouter({ // 所有的路由規則 routes: [ // 兩個路由規則 每個路由規則都是一個配置物件 其中至少包含path和component兩個屬性 // path 表示當前路由規則匹配的hash地址 router-link to裡面是誰就要寫誰 要一一對應 // component 表示當前路由規則對應要展示的元件 只接收元件物件、不接受字串 後面接const常量後面定義的 { path: '/user', component: User }, { path: '/register', component: Register } ] }) // 建立VM物件 const vm = new Vue({ // 指定控制的區域 el: '#app', data: { }, // 掛載路由例項物件 為了能夠讓路由規則生效 必須把路由物件掛載到Vue例項物件上 // router:router router }) </script> </body> </html>