Vue.js routing allows us to access different content through different urls.

Single Page Web Application (SPA) with multiple views can be realized through vue. js.

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Vue routing (router)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
  <h1>Vue routing instance</h1>
  <p>
    <! -- Use the router-link component to navigate.
    <! -- Specifies the link by passing in the 'to' attribute.
    <! -- <router-link> will be rendered as a '<a>' tag by default.
    <router-link to="/name">The name</router-link>
    <router-link to="/job">work</router-link>
  </p>
  <! -- Route exit -->
  <! -- Routing matching components will be rendered here -->
  <router-view></router-view>
</div>

<script>
Vue. Use (VueRouter) to import Vue and VueRouter

// 1. Define (routing) components.
// You can import from other files
const Name = { template: 
       
 
       
 }
const Job = { template: '< div > Web front-end < / div >' }

// 2. Define a route
// Each route should map one component. Where "Component" can be
// Component constructor created by vue.extend (),
// Or, just a component configuration object.
// We'll talk about nesting later.
const routes = [
  { path: '/name'.component: Name },
  { path: '/job'.component: Job }
]

// 3. Create a router instance and pass the 'routes' configuration
You can also pass other configuration parameters, but keep it simple for now.
const router = new VueRouter({
  routes // routes: routes
})

// 4. Create and mount root instances.
// Remember to inject the route with the router configuration parameter,
// Make the entire application routable
const app = new Vue({
  router
}).$mount('#app')

// Now the application is started!
</script>
</body>
</html>
Copy the code

\

\

\

\


\