vue routerのサンプルコードを格納

sample-vue.js / sample-vue-router

Browse code vue routerのサンプルコードを格納 master
0 parent commit a7fffb622f53fc0921b21a486afb309d1a17f1d2 yhornisse authored on 26 Dec 2019

Patch

Showing 11 changed files

Ignore Space Show notes View README.md 0 → 100644
# vue_router vue-routerは以下で追加できる。 ``` npm install --save vue-router ``` ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Run your tests ``` npm run test ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/).

Ignore Space Show notes View

README.md 0 → 100644

Ignore Space Show notes View package.json 0 → 100644
{ "name": "vue_router", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.4.3", "vue": "^2.6.10", "vue-router": "^3.1.3" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0", "babel-eslint": "^10.0.3", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "browserslist": [ "> 1%", "last 2 versions" ] }

Ignore Space Show notes View

package.json 0 → 100644

Ignore Space Show notes View public/favicon.ico 0 → 100644

Ignore Space Show notes View public/index.html 0 → 100644
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vue_router</title> </head> <body> <noscript> <strong>We're sorry but vue_router doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View

public/index.html 0 → 100644

Ignore Space Show notes View src/App.vue 0 → 100644
<template> <div id="app"> <nav> <ul> <li><router-link to="/hoge/1">hoge</router-link></li> <li><router-link to="/fuga">fuga</router-link></li> <li><router-link to="/piyo">piyo</router-link></li> </ul> </nav> <router-view></router-view> </div> </template> <style scoped> nav ul li { display: inline; } nav ul li + li{ margin-left: 1.5em; } </style> <script> </script>

Ignore Space Show notes View src/assets/logo.png 0 → 100644

Ignore Space Show notes View src/components/Fuga.vue 0 → 100644
<template> <div> fuga </div> </template> <script> </script> <style scoped> </style>

Ignore Space Show notes View src/components/Hoge.vue 0 → 100644
<template> <div> hoge </div> </template> <script> </script> <style scoped> </style>

Ignore Space Show notes View src/components/Piyo.vue 0 → 100644
<template> <div> piyo </div> </template> <script> </script> <style scoped> </style>

Ignore Space Show notes View src/main.js 0 → 100644
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')

Ignore Space Show notes View src/router.js 0 → 100644
import Vue from 'vue' import Router from 'vue-router' import Hoge from './components/Hoge.vue' import Fuga from './components/Fuga.vue' import Piyo from './components/Piyo.vue' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/hoge/:id', name: 'hoge', component: Hoge }, { path: '/fuga', name: 'fuga', component: Fuga }, { path: '/piyo', name: 'piyo', component: Piyo } ] })

Ignore Space Show notes View

src/router.js 0 → 100644

Show line notes below