路由允许通过不同URL访问不同内容 可以实现多视图的单页Web应用

const声明一个常量

  1. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <meta charset="utf-8" />
  7.     <title></title>
  8.   </head>
  10.   <body>
  11.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  13.     <script type="text/jscript">
  15.       ///const 用法
  16.        const PI =3.14;
  17.       // PI=123;  // 报错ncaught TypeError: Assignment to constant variable
  18.        const Person = {
  19.           name : '张三',
  20.           age : '30'
  21.       }
  23.       console.log(Person.name, Person.age)
  24.       Person.name = '李四'
  25.       // 注意 const 声明的对象的属性是可以修改的
  26.       Person.age = '40'
  27.       console.log(Person.name, Person.age)
  28.     </script>
  29.   </body>
  30. </html>

Vue Router

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Vue路由</title>
  6.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  7.     <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <h1>Hello App!</h1>
  12.       <p>
  13.         <!-- 使用 router-link 组件来导航. -->
  14.         <!-- 通过传入 `to` 属性指定链接. -->
  15.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  16.         <router-link to="/foo">Go to Foo</router-link>
  17.         <router-link to="/bar">Go to Bar</router-link>
  18.       </p>
  19.       <!-- 路由出口 -->
  20.       <!-- 路由匹配到的组件将渲染在这里 -->
  21.       <router-view></router-view>
  22.     </div>
  24.     <script>
  25.       // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
  27.       // 1. 定义（路由）组件。
  28.       // 可以从其他文件 import 进来
  29.       const Foo = { template: "<div>foo</div>" };
  30.       const Bar = { template: "<div>bar</div>" };
  32.       // 2. 定义路由
  33.       // 每个路由应该映射一个组件。 其中"component" 可以是
  34.       // 通过 Vue.extend() 创建的组件构造器，
  35.       // 或者，只是一个组件配置对象。
  36.       // 我们晚点再讨论嵌套路由。
  37.       const routes = [
  38.         { path: "/foo", component: Foo },
  39.         { path: "/bar", component: Bar },
  40.       ];
  42.       // 3. 创建 router 实例，然后传 `routes` 配置
  43.       // 你还可以传别的配置参数, 不过先这么简单着吧。
  44.       const router = new VueRouter({
  45.         routes, // （缩写）相当于 routes: routes
  46.       });
  48.       // 4. 创建和挂载根实例。
  49.       // 记得要通过 router 配置参数注入路由，
  50.       // 从而让整个应用都有路由功能
  51.       const app = new Vue({
  52.         router,
  53.       }).$mount("#app");
  55.       // 现在，应用已经启动了！
  56.     </script>
  57.   </body>
  58. </html>

点击过的导航链接会加上class =”router-link-exact-active router-link-active”样式