Several steps to create routing in vue

Several steps to create routing in vue;
Step one: Define the components that require routing.
Step 2: Define routing.
Step 3: Create a routing instance and pass in the configuration of the defined route
Step 4: Create a root instance to mount the route.
1. Define the routing component

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

2. Define the routing

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

3. Create a routing instance and pass in the configuration for defining the routing

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

4. Create a mounting root instance

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>

The above is the detailed content of Several steps to create routing in vue. For more information, please follow other related articles on the PHP Chinese website!