Vue.js \u8def\u7531<\/h1>\n<\/p><\/div>\n
\n Vue.js\u6ca1\u6709\u5185\u7f6e\u7684\u8def\u7531\u5668\u529f\u80fd\uff0c\u4f46\u662f\u60a8\u53ef\u4ee5\u8f7b\u677e\u5730\u521b\u5efa\u4e00\u4e2a\u5355\u9875\u5e94\u7528\u7a0b\u5e8f\uff0c\u8be5\u5e94\u7528\u7a0b\u5e8f\u4f7f\u7528\u63a8\u8350\u7684\u6b63\u5f0f\u683c\u5f0f\u652f\u6301-\u53d7\u652f\u6301\u7684vue-router\u5e93\u3002\n <\/div>\n
\n \u8981\u5728Vue.js\u4e2d\u5b89\u88c5\u8def\u7531\u5668\uff0c\u5fc5\u987b\u6267\u884c\u4e00\u4e9b\u6b65\u9aa4\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u4eceCDN\u76f4\u63a5\u4e0b\u8f7d\u8def\u7531\u5668\u6216\u4f7f\u7528NPM\u6216\u4f7f\u7528 Github\u6765\u4f7f\u7528\u8def\u7531\u5668\u3002\n <\/div>\n
\u76f4\u63a5\u4eceCDM\u4e0b\u8f7d<\/h3>\n
\n \u60a8\u53ef\u4ee5\u76f4\u63a5\u4eceCDN\u4e0b\u8f7d\u6700\u65b0\u7248\u672c\u7684vue-router\u3002\u53ef\u5728
\n https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js \u3002\n <\/div>\n
\n unpkg.com\u5305\u542b\u57fa\u4e8enpm\u7684CDN\u94fe\u63a5\uff0c\u5e76\u4e14\u59cb\u7ec8\u66f4\u65b0\u4e3a\u6700\u65b0\u7248\u672c\u3002\u4e0b\u8f7dunpkg.com\u6587\u4ef6\u540e\uff0c\u5c06\u5176\u6258\u7ba1\u5230\u670d\u52a1\u5668\uff0c\u5e76\u4e0e
\n Vue.js \u4f5c\u4e3a\u811a\u672c\u6807\u7b7e\u4e00\u8d77\u4f7f\u7528\n <\/div>\n
 <script src = \"\/path\/to\/vue.js\"><\/script><\/span>
 <script src = \"\/path\/to\/vue-router.js\"><\/script><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u5982\u679c\u8981\u4e0d\u4e0b\u8f7d\u5c31\u4f7f\u7528\u5b83\uff0c\u53ef\u4ee5\u6309\u4ee5\u4e0b\u65b9\u5f0f\u4f7f\u7528\u5b83:\n  <\/div>\n\n <script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"><\/script><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\u4f7f\u7528NPM\u5b89\u88c5\u8def\u7531\u5668<\/h3>\n\n    \u6253\u5f00Node.js\u547d\u4ee4\u63d0\u793a\u7b26\u5e76\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u6765\u5b89\u88c5vue-router\u3002\n  <\/div>\n\n npm install vue-router
 <\/span><\/code><\/pre>\n<\/p><\/div>\n 
\n   <\/p>\n
\u4f7f\u7528GitHub\u5b89\u88c5\u8def\u7531\u5668<\/h3>\n\n    \u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u4eceGitHub\u514b\u9686\u8def\u7531\u5668\u5b58\u50a8\u5e93:\n  <\/div>\n\n git clone https:\/\/github.com\/vuejs\/vue-router.git node_modules\/vue-router
 cd node_modules\/vue-router
 npm install
 npm run build
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u8ba9\u6211\u4eec\u4ee5\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\u6765\u4e86\u89e3Vue.js\u4e2d\u8def\u7531\u7684\u6982\u5ff5:\n  <\/div>\n\u793a\u4f8b<\/h3>\n\n    Index.html\u6587\u4ef6: <\/strong>\n  <\/div>\n\n <html><\/span>
    <head><\/span>
       <title><\/span>Vue.js Routing<\/title><\/span>
       <link rel=\"stylesheet\" href=\"index.css\">
         <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
 <script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"><\/script><\/span>
  <script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"><\/script><\/span>
     <\/head><\/span>
     <body><\/span>
       <div id = \"router_1\">
          <h2><\/span>This is Routing Example<\/h2><\/span>
          <p><\/span>
 <!-- use router-link component for navigation. -->
 <!-- `<router-link>` will be rendered as an `<a><\/span>` tag by default -->
             <router-link to = \"\/route1\">Click on Router Link 1<\/router-link>
             <router-link to = \"\/route2\"> Click on Router Link 2<\/router-link>
          <\/p><\/span>
          <!-- route outlet -->
          <!-- component matched by the route will render here -->
          <router-view><\/router-view>
       <\/div><\/span>
       <script type = \"text\/javascript\">
          const Route1 = { template: '<div style = \"border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\">You are seeing router link 1<\/div><\/span>' }
          const Route2 = { template: '<div style = \"border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\"> You are seeing router link 2<\/div><\/span>' }
          const routes = [
             { path: '\/route1', component: Route1 },
             { path: '\/route2', component: Route2 }
          ];
          const router = new VueRouter({
             routes \/\/ short for `routes: routes`
          });
       <\/script><\/span>
       <script src=\"index.js\"><\/script><\/span>
    <\/body><\/span>
 <\/html><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    Index.js\u6587\u4ef6: <\/strong>\n  <\/div>\n\n var vm = new Vue({
             el: '#router_1',
             router
          })
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u8ba9\u6211\u4eec\u4f7f\u7528\u4e00\u4e2a\u7b80\u5355\u7684CSS\u6587\u4ef6\u6765\u4f7f\u8f93\u51fa\u66f4\u5177\u5438\u5f15\u529b\u3002\n  <\/div>\n\n    Index.css\u6587\u4ef6: <\/strong>\n  <\/div>\n\n html, body {
     margin: 5px;
     padding: 0;
 }
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u7a0b\u5e8f\u6267\u884c\u540e\uff0c\u60a8\u5c06\u770b\u5230\u4ee5\u4e0b\u8f93\u51fa:\n  <\/div>\n\n   \u8f93\u51fa: <\/strong>\n  <\/div>\n   <\/p>\n
\n    \u5355\u51fb\u8def\u7531\u5668\u94fe\u63a52\uff0c\u60a8\u5c06\u770b\u5230\u5b83\u88ab\u91cd\u5b9a\u5411\u5230\u4ee5\u4e0b\u7ed3\u679c\u3002\n  <\/div>\n   <\/p>\n
\u793a\u4f8b\u8bf4\u660e<\/h3>\n\n    \u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u60a8\u53ef\u4ee5\u770b\u5230\u6211\u4eec\u5982\u4e0b\u6dfb\u52a0\u4e86vue-router.js\u6587\u4ef6:\n  <\/div>\n\n <script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"><\/script><\/span>
  <script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"><\/script><\/span>4
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u5728\u4e0b\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e24\u4e2a\u8def\u7531\u5668\u94fe\u63a5\u3002\u6211\u4eec\u5728\u4e3b\u4f53\u90e8\u5206\u4e2d\u5b9a\u4e49\u4e86\u4ee5\u4e0b\u8def\u7531\u5668\u94fe\u63a5:\n  <\/div>\n\n <router-link to = \"\/route1\">Click on Router Link 1<\/router-link>
  <router-link to = \"\/route2\"> Click on Router Link 2<\/router-link>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u5728\u8fd9\u91cc\uff0c
\n   
\n    
\n    <\/router-link><\/strong>\u662f\u7528\u4e8e\u5bfc\u822a\u5230HTML\u5185\u5bb9\u5e76\u5c06\u5176\u663e\u793a\u7ed9\u7528\u6237\u7684\u7ec4\u4ef6\u3002
\n   \u81f3<\/strong>\u5c5e\u6027\u6307\u5b9a\u76ee\u7684\u5730\u3002\u4f8b\u5982\uff0c\u60a8\u5fc5\u987b\u5355\u51fb\u663e\u793a\u94fe\u63a5\u7684\u6587\u4ef6\u3002\n  <\/div>\n\n    \u8def\u7531\u5668\u5728\u811a\u672c\u90e8\u5206\u4e2d\u521d\u59cb\u5316\uff0c\u5176\u4e2d\u521b\u5efa\u4e86\u4e24\u4e2a\u5e38\u91cf\uff0c\u5982\u4e0b\u6240\u793a:\n  <\/div>\n\n const Route1 = { template: '<div style = \"border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\">You are seeing router link 1<\/div><\/span>' }
          const Route2 = { template: '<div style = \"border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\"> You are seeing router link 2<\/div><\/span>' }
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u6211\u4eec\u6307\u5b9a\u4e86\u5355\u51fb\u8def\u7531\u5668\u94fe\u63a5\u65f6\u5c06\u663e\u793a\u7684\u6a21\u677f\u3002\n  <\/div>\n\n    \u63a5\u4e0b\u6765\u662f\u8def\u7ebfconst\uff0c\u5176\u4e2d\u6211\u4eec\u5b9a\u4e49\u4e86\u5fc5\u987b\u5728\u5176\u4e2d\u663e\u793a\u7684\u8def\u5f84\u7f51\u5740\u3002\n  <\/div>\n\n const routes = [
    { path: '\/route1', component: Route1 },
    { path: '\/route2', component: Route2 }
 ];
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u8def\u7531\u7528\u4e8e\u5b9a\u4e49\u8def\u5f84\u548c\u7ec4\u4ef6\u3002\u7528\u6237\u5355\u51fb\u8def\u7531\u5668\u94fe\u63a5\u65f6\uff0c\u8def\u5f84\u5c06\u663e\u793a\u5728\u8f93\u51fa\u4e2d\u3002\n  <\/div>\n\n    \u8be5\u7ec4\u4ef6\u91c7\u7528\u8981\u663e\u793a\u7684\u6a21\u677f\u7684\u540d\u79f0\u3002\u8def\u7531\u7684\u8def\u5f84\u9700\u8981\u4e0e\u5230\u5c5e\u6027\u7684\u8def\u7531\u5668\u94fe\u63a5\u76f8\u5339\u914d\u3002\n  <\/div>\n\n    \u4f8b\u5982\uff0c\n  <\/div>\n\n <router-link to = \"name_of_-the_path\"><\/router-link>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u73b0\u5728\uff0c\u6211\u4eec\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u7801\u521b\u5efa\u4e86VueRouter\u5b9e\u4f8b:\n  <\/div>\n\n const router = new VueRouter({
    routes \/\/ short for `routes: routes`
 });
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    VueRouter\u6784\u9020\u51fd\u6570\u5c06\u8def\u7531\u4f5c\u4e3a\u53c2\u6570\u3002\u6211\u4eec\u5df2\u7ecf\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u7801\u5c06\u8def\u7531\u5668\u5bf9\u8c61\u5206\u914d\u7ed9\u4e3bVue\u5b9e\u4f8b\u3002\n  <\/div>\n\n var vm = new Vue({
             el: '#router_1',
             router
          })
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u6267\u884c\u4e0a\u9762\u7684\u793a\u4f8b\u540e\uff0c\u60a8\u5c06\u5728\u6d4f\u89c8\u5668\u4e2d\u770b\u5230\u8f93\u51fa\u3002\u5982\u679c\u60a8\u53ef\u4ee5\u68c0\u67e5\u548c\u68c0\u67e5\u8def\u7531\u5668\u94fe\u63a5\uff0c\u6211\u4eec\u5c06\u53d1\u73b0\u5b83\u4e3a\u6d3b\u52a8\u5143\u7d20\u6dfb\u52a0\u4e86\u7c7b\u3002\u6dfb\u52a0\u7684\u7c7b\u4e3aclass =\"router-link-exact-active router-link-active\"\u3002\n  <\/div>\n\u5c06\u5c5e\u6027\u4f20\u9012\u5230\u8def\u7531\u5668\u94fe\u63a5<\/h3>\n\n    \u8ba9\u6211\u4eec\u770b\u770b\u5982\u4f55\u4f20\u9012\u8def\u7531\u5668\u94fe\u63a5\u7684\u5c5e\u6027\u3002\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u5df2\u5c06\u5c5e\u6027\" to\"\u4f20\u9012\u7ed9\u8def\u7531\u5668\u94fe\u63a5\uff0c\u5982\u4e0b\u6240\u793a:\n  <\/div>\n\n <router-link to = \"\/route1\">Click on Router Link 1<\/router-link>
 <router-link to = \"\/route2\"> Click on Router Link 2<\/router-link>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u6b64\u5c5e\u6027\u53ef\u4ee5\u901a\u8fc7\u8bb8\u591a\u5176\u4ed6\u65b9\u5f0f\u4f20\u9012\u5230\u8def\u7531\u5668\u94fe\u63a5\u3002\n  <\/div>\nto\u5c5e\u6027<\/h3>\n\n    \u5b83\u7528\u4e8e\u6307\u5b9a\u6307\u5b9a\u7ed9<router-link>\u3002\u5f53\u60a8\u5355\u51fb\u94fe\u63a5\u65f6\uff0c\u5b83\u5c06\u5728\u5185\u90e8\u5c06\u503c\u4f20\u9012\u7ed9
\n    router.push()<\/strong>\u3002\u8be5\u503c\u5fc5\u987b\u662f\u5b57\u7b26\u4e32\u6216\u4f4d\u7f6e\u5bf9\u8c61\u3002\u4f7f\u7528\"
\n   \u81f3\" <\/strong>\u5c5e\u6027\u53ef\u4ee5\u901a\u8fc7\u4e09\u79cd\u65b9\u5f0f\u4f20\u9012\u503c\u3002\n  <\/div>\n\n   \u793a\u4f8b1: <\/strong>\n  <\/div>\n\n <router-link to = \"\/route1\">Click on Router Link 1<\/router-link>
 It is rendered as: 
 <a href = \"#\/route\">Router Link <\/a><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n   \u793a\u4f8b2: <\/strong>\n  <\/div>\n\n <router-link v-bind:to = \"{path:'\/route1'}\">Click on Router Link 2<\/router-link> \/\/ When using an object, it is recommended to bind it as shown in e.g. 2.
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n   \u793a\u4f8b3: <\/strong>\n  <\/div>\n\n <router-link v-bind:to = \"{path:'\/route1', query: { name: 'Alex' }}\">Click on Router Link 3<\/router-link>\/\/You can pass a query string as shown in e.g. 3. This is an example of router link with query string.
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528\u4e86\u793a\u4f8b1\u7684\u65b9\u6cd5\u3002\u5728\u4e0b\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u8ba9\u6211\u4eec\u770b\u7b2c\u4e8c\u79cd\u65b9\u6cd5\u548c\u7b2c\u4e09\u79cd\u65b9\u6cd5\u3002\n  <\/div>\n\n    Index.html\u6587\u4ef6: <\/strong>\n  <\/div>\n\n <html><\/span>
    <head><\/span>
       <title><\/span>Vue.js Routing<\/title><\/span>
       <link rel=\"stylesheet\" href=\"index.css\">
         <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
 <script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"><\/script><\/span>
  <script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"><\/script><\/span>
     <\/head><\/span>
     <body><\/span>
       <div id = \"router_1\">
          <h2><\/span>This is Routing Example<\/h2><\/span>
          <p><\/span>
 <!-- use router-link component for navigation. -->
 <!-- `<router-link>` will be rendered as an `<a><\/span>` tag by default -->
             <router-link v-bind:to = \"{path:'\/route2'}\">Click on Router Link 2<\/router-link> 
             <router-link v-bind:to = \"{path:'\/route3', query: { name: 'Alex' }}\">Click on Router Link 3<\/router-link>
          <\/p><\/span>
          <!-- route outlet -->
          <!-- component matched by the route will render here -->
          <router-view><\/router-view>
       <\/div><\/span>
       <script type = \"text\/javascript\">
          const Route2 = { template: '<div style = \"border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\">You are seeing router link 2<\/div><\/span>' }
          const Route3 = { template: '<div style = \"border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\"> You are seeing router link 3<\/div><\/span>' }
          const routes = [
             { path: '\/route2', component: Route2 },
             { path: '\/route3', component: Route3 }
          ];
          const router = new VueRouter({
             routes \/\/ short for `routes: routes`
          });
       <\/script><\/span>
       <script src=\"index.js\"><\/script><\/span>
    <\/body><\/span>
 <\/html><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    Index.js\u6587\u4ef6: <\/strong>\n  <\/div>\n\n var vm = new Vue({
             el: '#router_1',
             router
          })
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u7a0b\u5e8f\u6267\u884c\u540e\uff0c\u60a8\u5c06\u770b\u5230\u4ee5\u4e0b\u8f93\u51fa:\n  <\/div>\n\n   \u8f93\u51fa: <\/strong>\n  <\/div>\n   <\/p>\n
\n    \u73b0\u5728\uff0c\u5355\u51fb\u8def\u7531\u5668\u94fe\u63a53\uff0c\u60a8\u5c06\u5728URL\u4e2d\u770b\u5230\u8bbe\u7f6e\u540d\u79f0\u4f5c\u4e3a\u67e5\u8be2\u5b57\u7b26\u4e32\u3002\u53c2\u89c1\u8f93\u51fa:\n  <\/div>\n   <\/p>\n
replace\u5c5e\u6027<\/h3>\n\n    replace\u5c5e\u6027\u7528\u4e8e\u66ff\u6362\u8def\u7531\u5668\u94fe\u63a5\u5e76\u8c03\u7528router.replace()\u800c\u4e0d\u662frouter.push()\u3002\u5982\u679c\u60a8\u4f7f\u7528replace prop\uff0c\u5219\u4e0d\u4f1a\u5b58\u50a8\u5bfc\u822a\u5386\u53f2\u8bb0\u5f55\u3002\n  <\/div>\n\n    Index.html\u6587\u4ef6: <\/strong>\n  <\/div>\n\n <html><\/span>
    <head><\/span>
       <title><\/span>Vue.js Routing<\/title><\/span>
       <link rel=\"stylesheet\" href=\"index.css\">
         <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
 <script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"><\/script><\/span>
  <script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"><\/script><\/span>
     <\/head><\/span>
     <body><\/span>
       <div id = \"router_1\">
          <h2><\/span>This is Routing Example<\/h2><\/span>
          <p><\/span>
 <!-- use router-link component for navigation. -->
 <!-- `<router-link>` will be rendered as an `<a><\/span>` tag by default -->
             <router-link v-bind:to = \"{path:'\/route2'}\">Click on Router Link 2<\/router-link> 
             <router-link v-bind:to = \"{path:'\/route3', query: { name: 'Panda' }}\" replace>This link is Replaced<\/router-link>
          <\/p><\/span>
          <!-- route outlet -->
          <!-- component matched by the route will render here -->
          <router-view><\/router-view>
       <\/div><\/span>
       <script type = \"text\/javascript\">
          const Route2 = { template: '<div style = \"border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\">You are seeing router link 2<\/div><\/span>' }
          const Route3 = { template: '<div style = \"border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\"> You are seeing router link 3<\/div><\/span>' }
          const routes = [
             { path: '\/route2', component: Route2 },
             { path: '\/route3', component: Route3 }
          ];
          const router = new VueRouter({
             routes \/\/ short for `routes: routes`
          });
       <\/script><\/span>
       <script src=\"index.js\"><\/script><\/span>
    <\/body><\/span>
 <\/html><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    Index.js\u6587\u4ef6<\/strong>\u5c06\u662f\u76f8\u540c\u7684\u3002\n  <\/div>\n\n    \u7a0b\u5e8f\u6267\u884c\u540e\uff0c\u60a8\u5c06\u770b\u5230\u4ee5\u4e0b\u8f93\u51fa:\n  <\/div>\n\n   \u8f93\u51fa: <\/strong>\n  <\/div>\n   <\/p>\n
\n    \u5355\u51fb\u5373\u53ef\u770b\u5230\n  <\/div>\nappend\u5c5e\u6027<\/h3>\n\n    \u9644\u52a0\u6807\u7b7e\u7528\u4e8e\u4e0e
\n   
\n     \u6dfb\u52a0\u5230\u4f7f\u8def\u5f84\u76f8\u5bf9\u3002\u8ba9\u6211\u4eec\u4e3e\u4e2a\u4f8b\u5b50\u3002
\n   <\/router-link>\n  <\/div>\n\n   \u793a\u4f8b: <\/strong>\n  <\/div>\n\n    Index.html\u6587\u4ef6: <\/strong>\n  <\/div>\n\n <html><\/span>
    <head><\/span>
       <title><\/span>Vue.js Routing<\/title><\/span>
       <link rel=\"stylesheet\" href=\"index.css\">
         <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
 <script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"><\/script><\/span>
  <script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"><\/script><\/span>
     <\/head><\/span>
     <body><\/span>
       <div id = \"router_1\">
          <h2><\/span>This is Routing Example<\/h2><\/span>
          <p><\/span>
 <!-- use router-link component for navigation. -->
 <!-- `<router-link>` will be rendered as an `<a><\/span>` tag by default -->
             <router-link v-bind:to = \"{path:'\/route2'}\">Click on Router Link 2<\/router-link> 
             <router-link v-bind:to = \"{ path: '\/route3'}\" append>This is an appended link<\/router-link>
          <\/p><\/span>
          <!-- route outlet -->
          <!-- component matched by the route will render here -->
          <router-view><\/router-view>
       <\/div><\/span>
       <script type = \"text\/javascript\">
          const Route2 = { template: '<div style = \"border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\">You are seeing router link 2<\/div><\/span>' }
          const Route3 = { template: '<div style = \"border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\"> You are seeing the appended link router<\/div><\/span>' }
          const routes = [
             { path: '\/route2', component: Route2 },
             { path: '\/route3', component: Route3 }
          ];
          const router = new VueRouter({
             routes \/\/ short for `routes: routes`
          });
       <\/script><\/span>
       <script src=\"index.js\"><\/script><\/span>
    <\/body><\/span>
 <\/html><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    Index.js\u6587\u4ef6: <\/strong>\n  <\/div>\n\n var vm = new Vue({
             el: '#router_1',
             router
          })
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u8ba9\u6211\u4eec\u4f7f\u7528\u4e00\u4e2a\u7b80\u5355\u7684CSS\u6587\u4ef6\u6765\u4f7f\u8f93\u51fa\u66f4\u5177\u5438\u5f15\u529b\u3002\n  <\/div>\n\n    Index.css\u6587\u4ef6: <\/strong>\n  <\/div>\n\n html, body {
     margin: 5px;
     padding: 0;
 }
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u7a0b\u5e8f\u6267\u884c\u540e\uff0c\u60a8\u5c06\u770b\u5230\u4ee5\u4e0b\u8f93\u51fa:\n  <\/div>\n\n   \u8f93\u51fa: <\/strong>\n  <\/div>\n   <\/p>\n
tag\u5c5e\u6027<\/h3>\n\n   
\n     \u5448\u73b0\u4e3a\u6807\u8bb0\u3002\u5f53\u60a8\u8981\u5c06\u5176\u5448\u73b0\u4e3a\u5176\u4ed6\u6807\u7b7e\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\u6807\u7b7eprop\u3002\u4f8b\u5982\uff0c\u5982\u679c\u8981\u5c06<router-link>\u5448\u73b0\u4e3a\"span\"\uff0c\u5219\u5e94\u5c06\u5176\u6307\u5b9a\u4e3a
\n     tag =\"span\"\u3002<\/strong>\u8ba9\u6211\u4eec\u4e3e\u4e00\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\u3002
\n   <\/router-link>\n  <\/div>\n\n   \u793a\u4f8b: <\/strong>\n  <\/div>\n\n    Index.html\u6587\u4ef6: <\/strong>\n  <\/div>\n\n <html><\/span>
    <head><\/span>
       <title><\/span>Vue.js Routing<\/title><\/span>
       <link rel=\"stylesheet\" href=\"index.css\">
         <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
 <script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"><\/script><\/span>
  <script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"><\/script><\/span>
     <\/head><\/span>
     <body><\/span>
       <div id = \"router_1\">
          <h2><\/span>This is Routing Example<\/h2><\/span>
          <p><\/span>
              <router-link v-bind:to = \"{ path: '\/route2'}\" tag = \"span\">Click on Router Link 2<\/router-link> 
             <router-link v-bind:to = \"{ path: '\/route3'}\" tag = \"span\">Click on Router Link 3<\/router-link>
          <\/p><\/span>
          <!-- route outlet -->
          <!-- component matched by the route will render here -->
          <router-view><\/router-view>
       <\/div><\/span>
       <script type = \"text\/javascript\">
          const Route2 = { template: '<div style = \"border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\">You are seeing router link 2<\/div><\/span>' }
          const Route3 = { template: '<div style = \"border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\"> You are seeing router link 3<\/div><\/span>' }
          const routes = [
             { path: '\/route2', component: Route2 },
             { path: '\/route3', component: Route3 }
          ];
          const router = new VueRouter({
             routes \/\/ short for `routes: routes`
          });
       <\/script><\/span>
       <script src=\"index.js\"><\/script><\/span>
    <\/body><\/span>
 <\/html><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    Index.js\u6587\u4ef6: <\/strong>\n  <\/div>\n\n    index.js\u6587\u4ef6\u4e0e\u524d\u9762\u793a\u4f8b\u4e2d\u4f7f\u7528\u7684\u6587\u4ef6\u76f8\u540c\u3002\n  <\/div>\n\n    \u6267\u884c\u5b8c\u7a0b\u5e8f\uff0c\u60a8\u5c06\u770b\u5230\u4ee5\u4e0b\u8f93\u51fa:\n  <\/div>\n\n   \u8f93\u51fa: <\/strong>\n  <\/div>\n   <\/p>\n
\n    \u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\uff0c\u60a8\u53ef\u4ee5\u770b\u5230\u73b0\u5728\u663e\u793a\u7684\u6807\u8bb0\u662fspan\u6807\u7b7e\u3002\u5b83\u4eec\u4e0d\u88ab\u89c6\u4e3a\u53ef\u5355\u51fb\u7684\u94fe\u63a5\uff0c\u4f46\u662f\u60a8\u53ef\u4ee5\u5355\u51fb\u5b83\u4eec\u3002\u73b0\u5728\uff0c\u5355\u51fb\u8def\u7531\u5668\u94fe\u63a53\u5e76\u67e5\u770b\u7ed3\u679c\u3002\n  <\/div>\n   <\/p>\n
active-class\u5c5e\u6027<\/h3>\n\n    \u8981\u5c06\u6d3b\u52a8\u7c7b\u5c5e\u6027\u6fc0\u6d3b\uff0c\u5b83\u4f1a\u6dfb\u52a0\u5230
\n   
\n     \u3002\u5b83\u7528\u4e8e\u8868\u660e\u8def\u7531\u5668\u94fe\u63a5\u5904\u4e8e\u6d3b\u52a8\u72b6\u6001\u3002\u5b83\u88ab\u6dfb\u52a0\u4e3a
\n     active-class =\"_active\"\u3002<\/strong>
\n   <\/router-link>\n  <\/div>\n\n    \u4ee5\u4e0b\u4ee3\u7801\u6307\u5b9a\u793a\u4f8b\u4e2d\u7684\u4f7f\u7528\u65b9\u6cd5\u3002\n  <\/div>\n\n   \u8bed\u6cd5: <\/strong>\n  <\/div>\n\n <style><\/span>
    ._active{
       background-color : red;
    }
 <\/style><\/span>
 <p><\/span>
 <router-link v-bind:to = \"{ path: '\/route2'}\" active-class = \"._active\">Click on Router Link 2<\/router-link>
 <router-link v-bind:to = \"{ path: '\/route3'}\" tag = \"span\">Click on Router Link 3<\/router-link>
 <\/p><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    \u8fd9\u5c06\u4f7f\"\u5355\u51fb\u8def\u7531\u5668\u94fe\u63a52\"\u8def\u5f84\u5904\u4e8e\u6d3b\u52a8\u72b6\u6001\uff0c\u800c\"\u5355\u51fb\u8def\u7531\u5668\u94fe\u63a53\"\u5c06\u4fdd\u6301\u76f8\u540c\u3002\n  <\/div>\nexact-active-class\u5c5e\u6027<\/h3>\n\n    exact-active-class\u914d\u7f6e\u5f53\u94fe\u63a5\u5b8c\u5168\u5339\u914d\u4e14\u5904\u4e8e\u6d3b\u52a8\u72b6\u6001\u65f6\u5e94\u7528\u7684\u6d3b\u52a8CSS\u7c7b\u3002\u9ed8\u8ba4\u7684\u7cbe\u786e\u6d3b\u52a8\u7c7b\u88ab\u5e94\u7528\u4e3arouter-link-exact-active\u3002\n  <\/div>\n\n    \u4ee5\u4e0b\u4ee3\u7801\u6307\u5b9a\u793a\u4f8b\u4e2d\u7684\u4f7f\u7528\u65b9\u6cd5\u3002\n  <\/div>\n\n   \u8bed\u6cd5: <\/strong>\n  <\/div>\n\n <style><\/span>
    ._active{
       background-color : red;
    }
 <\/style><\/span>
 <p><\/span>
 <router-link v-bind:to = \"{ path: '\/route2'}\" exact-active-class = \"._active\">Click on Router Link 2<\/router-link>
 <router-link v-bind:to = \"{ path: '\/route3'}\" tag = \"span\">Click on Router Link 3<\/router-link>
 <\/p><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\nevent\u5c5e\u6027<\/h3>\n\n    \u5728\u4e0a\u4e00\u4e2a\u793a\u4f8b\u4e2d\uff0c\u60a8\u5df2\u7ecf\u770b\u5230router-link\u7684\u9ed8\u8ba4\u4e8b\u4ef6\u662fclick\u4e8b\u4ef6\u3002\u5f53\u60a8\u5355\u51fb\u94fe\u63a5\u65f6\uff0c\u5c06\u663e\u793a\u8def\u7531\u5668\u94fe\u63a5\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528event\u5c5e\u6027\u6765\u66f4\u6539\u6b64\u8bbe\u7f6e\u3002\u8bf7\u53c2\u89c1\u4ee5\u4e0b\u793a\u4f8b:\n  <\/div>\n\n   \u793a\u4f8b: <\/strong>\n  <\/div>\n\n    Index.html\u6587\u4ef6: <\/strong>\n  <\/div>\n\n <html><\/span>
    <head><\/span>
       <title><\/span>Vue.js Routing<\/title><\/span>
       <link rel=\"stylesheet\" href=\"index.css\">
         <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
 <script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\"><\/script><\/span>
  <script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\"><\/script><\/span>
     <\/head><\/span>
     <body><\/span>
       <div id = \"router_1\">
          <h2><\/span>This is Routing Example<\/h2><\/span>
 <style><\/span>
    ._active{
       background-color : red;
    }
 <\/style><\/span>
 <p><\/span>
 <router-link v-bind:to = \"{ path: '\/route2'}\" event = \"mouseover\">Hover this link<\/router-link>
             <router-link v-bind:to = \"{ path: '\/route3'}\" tag = \"span\">Click on Router Link 3<\/router-link>
          <\/p><\/span>
          <!-- route outlet -->
          <!-- component matched by the route will render here -->
          <router-view><\/router-view>
       <\/div><\/span>
       <script type = \"text\/javascript\">
          const Route2 = { template: '<div style = \"border-radius:30px;background-color:lightpink;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\">You are seeing router link 2<\/div><\/span>' }
          const Route3 = { template: '<div style = \"border-radius:20px;background-color:lightgreen;width:300px;height:100px;margin:10px;font-size:25px;padding:10px;\"> You are seeing router link 3<\/div><\/span>' }
          const routes = [
             { path: '\/route2', component: Route2 },
             { path: '\/route3', component: Route3 }
          ];
          const router = new VueRouter({
             routes \/\/ short for `routes: routes`
          });
       <\/script><\/span>
       <script src=\"index.js\"><\/script><\/span>
    <\/body><\/span>
 <\/html><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n\n    Index.js\u6587\u4ef6: <\/strong>\n  <\/div>\n\n    Index.js\u6587\u4ef6\u4e0e\u4e0a\u9762\u7684\u793a\u4f8b\u76f8\u540c\u3002\n  <\/div>\n\n    \u7a0b\u5e8f\u6267\u884c\u540e\uff0c\u60a8\u5c06\u5c06\u770b\u5230\u4ee5\u4e0b\u8f93\u51fa:\n  <\/div>\n\n   \u8f93\u51fa: <\/strong>\n  <\/div>\n   <\/p>\n
\n    \u5f53\u60a8\u5c06\u9f20\u6807\u5149\u6807\u60ac\u505c\u5728\u7b2c\u4e00\u4e2a\u94fe\u63a5\u4e0a\u65f6\uff0c\u60a8\u5c06\u770b\u5230\u4ee5\u4e0b\u7ed3\u679c\u3002\n  <\/div>\n   <\/p>\n
\n <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js \u8def\u7531zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[122],"tags":[],"class_list":["post-985","post","type-post","status-publish","format-standard","hentry","category-vuejc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/985"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=985"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/985\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}