{"id":11159,"date":"2020-06-14T10:45:02","date_gmt":"2020-06-14T01:45:02","guid":{"rendered":"http:\/\/www.code-magagine.com\/?p=11159"},"modified":"2023-05-27T23:56:43","modified_gmt":"2023-05-27T14:56:43","slug":"%e3%80%90vue-js%e3%80%91%e3%80%8cvue-router%e3%80%8d%e3%81%a7%e8%a9%b3%e7%b4%b0%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"http:\/\/www.code-magagine.com\/?p=11159","title":{"rendered":"\u3010Vue.js\u3011\u300cVue-Router\u300d\u3067\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6e21\u3059\u65b9\u6cd5"},"content":{"rendered":"

URL\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u4ed8\u4e0e<\/h2>\n

URL\u30d1\u30e9\u30e1\u30fc\u30bf\u3068\u3044\u3046\u306e\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306bURL\u306e\u672b\u5c3e\u306b\u3064\u3051\u308b\u6570\u5b57\u306e\u3053\u3068<\/strong><\/span>\u3067\u3059\u3002<\/p>\n

http:\/\/localhost\/{\u6570\u5b57}<\/pre>\n
$route\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u7d4c\u7531\u3067\u6e21\u3059<\/h3>\n
\u30e1\u30ea\u30c3\u30c8<\/h4>\n
\u30eb\u30fc\u30bf\u30fc\u7d4c\u7531\u3067\u3057\u304b\u4f7f\u3048\u306a\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3044\u3046\u4e8b\u3067\u7528\u9014\u3092\u5236\u9650<\/strong><\/span>\u3067\u304d\u307e\u3059\u3002<\/p>\n
router.js<\/h4>\n
\u4e0b\u8a18\u306e\u3088\u3046\u306b\u300c:\u30d1\u30e9\u30e1\u30fc\u30bf\u540d\u300d\u3068\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n
const router = new VueRouter({\r\n  routes:[\r\n    { path:\"\/\",component:\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c81},\r\n    { path:\"\/test\/:id\",component:\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c82}\r\n  ]\r\n})<\/pre>\n
SFC\u5074<\/h4>\n
\u300c$route.params.\u30d1\u30e9\u30e1\u30fc\u30bf\u540d\u300d<\/strong><\/span>\u3068\u8a18\u8ff0\u3057\u3066\u6e21\u3063\u3066\u304d\u305f\u30d1\u30e9\u30e1\u30fc\u30bf\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u4e8b\u304c\u53ef\u80fd\u3067\u3059\u3002$route\u306b\u95a2\u3057\u3066\u306f\u5f8c\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
  <div>\r\n    {{ $route.params.id }}\r\n  <\/div><\/pre>\n
$route\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u3063\u3066\u52d5\u7684\u306a\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6e21\u3059\u3002<\/h4>\n
\u540d\u524d\u4ed8\u304d\u30eb\u30fc\u30c8(\u4e8b\u524d\u306brouter.js\u306eroutes\u306bname\u8981\u7d20\u3068\u3057\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u767b\u9332\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002)<\/strong><\/span>\u3068\u7d44\u307f\u5408\u308f\u305b\u308c\u3070$router\u306bpush\u3059\u308b\u69cb\u6587\u3067\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6e21\u3059\u4e8b\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
this.$router.push({ name:'URL',params: { \u30d1\u30e9\u30e1\u30fc\u30bf\u540d: \u52d5\u7684\u306a\u30d1\u30e9\u30e1\u30fc\u30bf\uff1aJavaScript\u51e6\u7406}})<\/pre>\n
props\u7d4c\u7531\u3067\u6e21\u3059\u3002<\/h3>\n
\u30e1\u30ea\u30c3\u30c8<\/h4>\n
\u30eb\u30fc\u30bf\u30fc\u95a2\u4fc2\u306a\u304fprops\u3067\u6e21\u305b\u308b\u306e\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u518d\u5229\u7528\u6027\u304c\u9ad8\u307e\u308a\u307e\u3059\u3002<\/strong><\/span><\/p>\n
router.js\u5074<\/h4>\n
props\u7d4c\u7531\u3067\u6e21\u3057\u305f\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30ea\u30f3\u30af\u8a2d\u5b9a\u306b\u300cprops:true\u300d<\/strong><\/span>\u3092\u4ed8\u3051\u52a0\u3048\u307e\u3059\u3002<\/p>\n
export default new Router({\r\n  mode: \"history\",\r\n  routes: [{ path: '\/', component: Home },\r\n  { path: '\/content\/:id', component: Content, props: true }]\r\n});<\/pre>\n
SFC\u5074<\/h4>\n
\u6e21\u3055\u308c\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074\u3068\u3057\u3066\u306fprops\u3068\u3057\u3066\u53d7\u3051\u307e\u3059\u3002<\/p>\n
<template>\r\n  <div>\r\n    <h1>Content<\/h1>\r\n    {{ id }}\r\n  <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n  props: [\"id\"]\r\n};\r\n<\/script><\/pre>\n
router-link\u3092\u4f7f\u3063\u3066\u52d5\u7684\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6e21\u3059\u3002<\/h3>\n
router.js\u5074\u306bname\u8981\u7d20\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u540d\u524d\u4ed8\u304d\u30eb\u30fc\u30c8<\/strong><\/span>\u3068\u547c\u3073\u307e\u3059\u3002<\/p>\n
export default new Router({\r\n  routes: [\r\n  { path: '\/content\/:id', component: Content, props: true, name: \"content-url\" }]\r\n});<\/pre>\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074\u306e\u30ea\u30f3\u30af\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5f62\u5f0f\u3067\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6e21\u3059\u4e8b\u304c\u53ef\u80fd<\/strong><\/span>\u3067\u3059\u3002<\/p>\n
    <router-link \r\n      :to=\"{ name: 'content-url', params: {id: Number(id) + 1 } }\"\r\n      >\u30ea\u30f3\u30af\u540d<\/router-link><\/pre>\n
\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6e21\u3059<\/h2>\n
URL\u30d1\u30e9\u30e1\u30fc\u30bf\u3068\u3044\u3046\u306e\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306bURL\u306e\u672b\u5c3e\u306b\u3064\u3051\u308b\uff1f\u4ed8\u304d\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u3053\u3068\u3067\u3059\u3002<\/strong><\/span>\u3002<\/p>\n
http:\/\/localhost\/content?id=1<\/pre>\n
router-link\u3092\u4f7f\u3063\u3066\u6e21\u3059\u65b9\u6cd5<\/h3>\n
\u4e0b\u8a18\u306e\u3088\u3046\u306bquery\u3068\u3044\u3046\u8981\u7d20\u3092\u4f7f\u7528\u3057\u3066\u8a18\u8ff0\u3057\u307e\u3059\u3002\u306a\u304a\u3001query\u306b\u95a2\u3057\u3066\u306f\u7279\u306bname\uff08\u540d\u524d\u4ed8\u304d\u30eb\u30fc\u30c8\uff09\u3092\u4f7f\u7528\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u3068\u3044\u3046\u5236\u7d04\u306f\u306a\u304f\u3001path\u3067\u3082\u5927\u4e08\u592b<\/strong><\/span>\u3067\u3059\u3002<\/p>\n
    <router-link \r\n      :to=\"{ \r\n        name: 'content-url', \r\n        params: {id: Number(id) + 1 },\r\n        query:{str: 'test'} }\"\r\n      >\u30ea\u30f3\u30af\u540d<\/router-link><\/pre>\n","protected":false},"excerpt":{"rendered":"URL\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u4ed8\u4e0e URL\u30d1\u30e9\u30e1\u30fc\u30bf\u3068\u3044\u3046\u306e\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306bURL\u306e\u672b\u5c3e\u306b\u3064\u3051\u308b\u6570\u5b57\u306e\u3053\u3068\u3067\u3059\u3002 http:\/\/localhost\/{\u6570\u5b57} $route\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u7d4c\u7531\u3067\u6e21\u3059 \u30e1\u30ea\u30c3\u30c8 \u30eb\u30fc\u30bf\u30fc\u7d4c\u7531\u3067\u3057\u304b\u4f7f\u3048\u306a\u3044\u30b3\u30f3 […]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[60],"tags":[],"_links":{"self":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/11159"}],"collection":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11159"}],"version-history":[{"count":6,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/11159\/revisions"}],"predecessor-version":[{"id":20617,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/11159\/revisions\/20617"}],"wp:attachment":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11159"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}