vue-router路由入门

vue路由的基本使用

摘要

vue路由入门，vue-router, vue

首先导入vue.js和vue-reuter

<script src="static/js/vue.js"></script>
<script src="static/js/vue-router.js"></script>

• html

  <div id="app">
        <h1>欢迎来到王者荣耀</h1>
           <!-- 方式一 用a标签 -->
          <a href="#/login">登录</a>
          <a href="#/register">注册</a>
        </p>
        <router-view></router-view>
  
        <p>
          <!-- 方式二 router-link标签 -->
          <!-- 使用 router-link 组件来导航. -->
          <!-- 通过传入 `to` 属性指定链接. -->
          <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
          <router-link to="login">登录</router-link>
          <router-link to="register">注册</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view ></router-view>
      </div>
  

• javascript

   <script>
          
        var login = { template: "<div>登录</div>" };
        var register = { template: "<div>注册</div>" };
        
        var routes = [
          { path: "/login", component:login },
          { path: "/register", component:register},
        ];
        const router = new VueRouter({
          routes, // (缩写) 相当于 routes: routes
        });
  
        var vm = new Vue({
          el:"#app",
          data:{},
          router:router,
        });
      </script>
  

https://files.cnblogs.com/files/zhizunbao-monky/vue.js
https://files.cnblogs.com/files/zhizunbao-monky/vue-router.js