Skip to content

F
front-ntflix
Commit f3701d79 authored by Daniela Olinda Catarina's avatar Daniela Olinda Catarina
Browse files
Options

adicionando router

parent 97889411
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1905 additions and 160 deletions
index.html
View file @ f3701d79
...@@ -2,13 +2,23 @@ ...@@ -2,13 +2,23 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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> </head>
<body> <body>
<div id="app"></div>
<script src="/dist/build.js"></script> <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> </body>
......
package-lock.json
View file @ f3701d79
This diff is collapsed.
package.json
View file @ f3701d79
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules" "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}, },
"dependencies": { "dependencies": {
"cli": "^1.0.1",
"router": "^1.3.7",
"vue": "^2.5.11" "vue": "^2.5.11"
}, },
"browserslist": [ "browserslist": [
...@@ -18,6 +20,7 @@ ...@@ -18,6 +20,7 @@
"not ie <= 8" "not ie <= 8"
], ],
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-router": "~5.0.0",
"babel-core": "^6.26.0", "babel-core": "^6.26.0",
"babel-loader": "^7.1.2", "babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0", "babel-preset-env": "^1.6.0",
......
src/App.vue
View file @ f3701d79
<template> <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"> <div class="Menu-Principal">
<ul> <ul>
<li><a href="#home">Home</a></li> <li><a href="#home">Home</a></li>
<li><a href="#news">cadastro</a></li> <li><a href="#news">cadastro</a></li>
...@@ -472,22 +483,34 @@ ...@@ -472,22 +483,34 @@
</div> </div>
</template> </template>
<script>
<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script> import Home from './components/home.vue'
<script src = "https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script> import cadastro from './components/cadastro.vue'
<script src = "https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const routes = {
'/': Home,
'/cadastro': cadastro
}
export default { export default {
name: 'app', data() {
data () {
return { return {
msg: 'Welcome to Your Vue.js App', currentPath: window.location.hash
}
},
computed: {
currentView() {
return routes[this.currentPath.slice(1) || '/'] || NotFound
} }
}, },
mounted() {
window.addEventListener('hashchange', () => {
this.currentPath = window.location.hash
})
}
} }
</script> </script>
<style> <style>
......
src/componentes/cadastro.vue deleted 100644 → 0
View file @ 97889411
<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 0 → 100644
View file @ f3701d79
<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 0 → 100644
View file @ f3701d79
<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
View file @ f3701d79
import Vue from 'vue' /*import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue' import App from '/'
import Home from '../compoments/home.vue'
import Cadastro from '../components/cadastro.vue'
Vue.component('component-a', { /* */})
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ }) const routes = [
/*{
new Vue({ el: '#app' }) path: '/',
new Vue({ name: 'home',
el: '#app', component: Home
render: h => h(App) },
{
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
*/
// nadson
new Vue({ import Vue from 'vue'
el: '#app', import Router from 'vue-router'
components: { import Home from './views/home.vue'
'component-home': home, import Cadastro from './components/cadastro.vue'
'component-b': cadastro
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')
} }
}) ]
});
var menu = vue.components ('menu-content', { \ No newline at end of file
template: '#menuContent',
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment