Vue路由基础

Vue路由基础代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue路由</title>
    <!-- 连接路由文件 -->
    <script src="vue/vue2.js"></script>
    <script src="vue/vue_router2.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 试用router-link组建来导航 -->
      <!-- 通过传入`to`属性制定连接 -->
      <!-- <router-link>默认会被渲染成一个`<a>标签` -->
      <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由器匹配到的组建将渲染在这里 -->
      <router-view></router-view>
    </div>
  </body>
  <script>
    //0.如果使用模块化机制变成，导入Vue和VueRouter，要调用Vue.use（VueRouter）
    //1.定义（路由）组件
    //可以从其他文件import进来
    const Foo = { template: "<div>foo</div>" };
    const Bar = { template: "<div>bar</div>" };
    //2.定义路由
    //每个路由应该映射一个组件。其中“component”可以是通过Vue.extend()创建的组建构造器，
    //或者，值是一个组件配置对象。
    const routes = [
      { path: "/foo", component: Foo },
      { path: "/bar", component: Bar }
    ];
    //3.创建router实例，然后传`routes`配置
    //还可以传别的配置参数，不过先这么简单看
    const router = new VueRouter({
      routes //(缩写)相当于额routes:routes
    });
    //4.创建和挂载根实例。
    //记得要通过router配置参数注入路由，
    //从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount("#app");
    //现在已经启动了
  </script>
</html>

 

posted @ 2018-12-14 11:42  BLackPeace  阅读(177)  评论(0)    收藏  举报