adicionando router

f3701d79 · Daniela Olinda Catarina · 97889411 · f3701d79 · f3701d79 · f3701d79
Commit f3701d79 authored May 24, 2022 by Daniela Olinda Catarina
8 changed files
--- a/index.html
+++ b/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/vue@2.6.14/dist/vue.js>"></script> -->
+ 
+     <!--<script src="app.js"></script> -->


  </body>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",

--- a/src/App.vue
+++ b/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/vue-resource@1.3.4"></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>

--- a/src/componentes/cadastro.vue
+++ b/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
--- a/src/components/cadastro.vue
+++ b/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
--- a/src/components/home.vue
+++ b/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
--- a/src/main.js
+++ b/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