adicionando router

index.html

@@ -2,13 +2,23 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>ntflix-ntlabs</title>
+    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <mate name="viewport" context="width=device-width,initial-scale=1.0">
+    <link real = 'icon' href= "<% = BASE_URL%>faicon."ico">
+    <title>ntflix-ntlabs</title> -->
+
+   
+ 
   </head>
   <body>
-    <div id="app"></div>
+    
     <script src="/dist/build.js"></script>
-
+    <!-- <div id="app"></div> -->
     
+     
+    <!--<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js>"></script> -->
+ 
+     <!--<script src="app.js"></script> -->
 
 
   </body>

package.json

@@ -10,6 +10,8 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
+    "cli": "^1.0.1",
+    "router": "^1.3.7",
     "vue": "^2.5.11"
   },
   "browserslist": [
@@ -18,6 +20,7 @@
     "not ie <= 8"
   ],
   "devDependencies": {
+    "@vue/cli-plugin-router": "~5.0.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.0",

src/App.vue

 <template>
-  <div class= "home">
-
+   
+  <div id= "app">
+                 
+                <router-view>
+                    <div id="nav">  
+                  
+                    <router-link to="/">Home</router-link> |
+                    <router-link to="/about">about</router-link>
+                     <router-link to="/cadastro">cadastro</router-link>                  
+                 
+                </div>
+                </router-view>
           <div class="Menu-Principal">
-             
+              
+                  
                 <ul>
                   <li><a href="#home">Home</a></li>
                   <li><a href="#news">cadastro</a></li>
@@ -472,22 +483,34 @@
 </div>
 </template>
 
+<script>
 
-<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>
-<script src = "https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>
+import Home from './components/home.vue'
+import cadastro from './components/cadastro.vue'
 
-<script>
 
+const routes = {
+  '/': Home,
+  '/cadastro': cadastro
+  
+}
 export default {
-  name: 'app',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App',
-    }
-  },
+      data() {
+        return {
+          currentPath: window.location.hash
+        }
+    },
+    computed: {
+        currentView() {
+          return routes[this.currentPath.slice(1) || '/'] || NotFound
+        }
+      },
+      mounted() {
+        window.addEventListener('hashchange', () => {
+          this.currentPath = window.location.hash
+        })
+      }
 }
-
 </script>
  
 <style>

src/componentes/cadastro.vue

-<template>
-    <h1>cadastro</h1>
-</template>
-<script>
-import { defineComponent } from '@vue/composition-api'
-
-export default defineComponent({
-    setup() {
-        
-    },
-})
-</script>
-<style >
-
-</style>
\ No newline at end of file

src/components/cadastro.vue

+<template>
+<div id="cadastro">
+     <router-view></router-view>
+     <h1>cadastro</h1>
+</div>
+  
+</template>
+<script>
+//import { defineComponent } from '@vue/composition-api'
+
+import {currentView} from "@vue/cli-plugin-router"
+
+
+
+export default ({
+    cadastro() {
+      
+   
+    },
+})
+</script>
+<style >
+
+</style>
\ No newline at end of file

src/components/home.vue

+<template>
+    <router-view>
+         <h1>OI PAGINA HOME</h1> 
+    </router-view>
+   
+</template>
+<script>
+import {currentView} from "@vue/cli-plugin-router"
+
+export default ({
+    name : "home"
+})
+</script>
+<style >
+
+</style>
\ No newline at end of file

src/main.js

-import Vue from 'vue'
-import App from './App.vue'
-
-
-Vue.component('component-a', { /* */})
-Vue.component('component-b', { /* ... */ })
-Vue.component('component-c', { /* ... */ })
-
-new Vue({ el: '#app' })
-new Vue({
-  el: '#app',
-  render: h => h(App)
-})
-
-
-new Vue({
-  el: '#app',
-  components: {
-    'component-home': home,
-    'component-b': cadastro
-  }
+/*import { createRouter, createWebHistory } from 'vue-router'
+import App from '/'
+import Home from '../compoments/home.vue'
+import Cadastro from '../components/cadastro.vue'
+
+
+const routes = [
+  /*{
+    path: '/',
+    name: 'home',
+    component: Home
+  },
+  {
+    path: '/home',
+    name: 'home',
+    component: Cadastro
+  },*/
+  //{
+   /* path: '/cadastro',
+    name: 'cadastro',
+    component: Cadastro
+    //component: () => import('./components/cadastro')
+ // }
+//]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
 })
+export default router
+*/
 
-var menu = vue.components ('menu-content', {
-template: '#menuContent',
-  
-
-
+// nadson
 
-
-})
+import Vue from 'vue'
+ 	import Router from 'vue-router'
+ 	import Home from './views/home.vue'
+  import Cadastro from './components/cadastro.vue'
+ 	 
+ 	Vue.use(Router)
+ 	 
+ 	export default new Router({
+ 	mode: 'history',
+ 	base: process.env.BASE_URL,
+ 	routes: [
+ 	{
+ 	path: '/',
+ 	name: 'home',
+ 	component: Home
+ 	},
+ 	{
+ 	path: '/cadastro',
+ 	name: 'cadastro',
+ 	// divisão do código no nível da rota
+ 	// isso gera um pedaço(chunk) separado (cadastro. [hash] .js) para esta rota
+ 	// que é carregado quando a rota é visitada..
+ 	// webpackChunkName irá criar o pedaço(chunk) com o nome passado para ela,
+ 	// sem o webpackChunkName é gerado um arquivo (chunk. [hash] .js)
+ 	component: () => import(/* webpackChunkName: "cadastro" */ './components/cadastro.vue')
+ 	}
+ 	]
+ 	});
\ No newline at end of file