【轉載】關於vue-router的使用

時間 2019-12-14

標籤轉載關於 vue router 使用简体版

原文原文鏈接

本地dev環境，打開後直接跳轉到http://localhost:8080/#/而且index.html上的內容一閃而過，而後就啥也沒有了，好氣啊 index.htmlhtml

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>webpack</title> </head> <body> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 組件來導航. --> <!-- 經過傳入 `to` 屬性指定連接. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這裏 --> <router-view></router-view> </div> <!-- built files will be auto injected --> </body> </html>

下面是main.jsvue

import Vue from 'vue' import VueRouter from "vue-router"; Vue.use(VueRouter); const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定義路由 // 每一個路由應該映射一個組件。 其中"component" 能夠是 // 經過 Vue.extend() 建立的組件構造器， // 或者，只是一個組件配置對象。 // 咱們晚點在討論嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 建立 router 實例，而後傳 `routes` 配置 // 你還能夠傳別的配置參數, 不過先這麼簡單着吧。 const router = new VueRouter({ routes // （縮寫）至關於 routes: routes }) // 4. 建立和掛載根實例。 // 記得要經過 router 配置參數注入路由， // 從而讓整個應用都有路由功能 const app = new Vue({ router }).$mount('#app')原網址：http://cnodejs.org/topic/581705321a9a7d99095312e3

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。