vue中建立路由的幾個步驟

在vue中建立路由的幾個步驟;
第一步：定義需要路由的元件。
第二步：定義路由。
第三步：建立路由實例，傳入所定義路由的設定
第四步：建立掛載路由的根實例。
1、定義路由元件

const Foo : {template: &#39;<p> this is foo </p>
const Bar : {template: &#39;<p> this is bar </p>
.....

2、定義路由

const routes: [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
]

3、建立路由實例，傳入定義路由的設定

const router = new VueRouter({
        routes: routes
})

4、建立掛載根實例

const app = new Vue({
router： router
}).$mount('#app')

HTML

<!--外部链接--><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><p id="app">
  <h1>Hello</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view></p>

以上是vue中建立路由的幾個步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！