昨日内容回顾
一、编程式的导航
- router.push(location, onComplete?, onAbort?)
- router.replace(location, onComplete?, onAbort?)
二、vue页面布局
表示h1标签
- marked
  - 使用highlight.js

昨日内容回顾

1. 组件间的传值
    1. bus  --> 空Vue对象
        通过向bus对象抛出自定义事件的方式在组件间传递信息
    2. 注意事项：
        1. bus.$on()应该在组件mounted（挂载在页面上）的时候就执行
        2. this对象
2. Vue实例的生命周期钩子函数（8个）
    1. beforeCreate
        data属性光声明没有赋值的时候
    2. created
        data属性完成了赋值
    3. beforeMount
        页面上的{{name}}还没有被渲染成真正的数据
    4. mounted
        页面上的{{name}}被渲染成真正的数据
    5. beforeUpdate
        数据（data属性）更新之前会执行的函数
    6. updated
        数据（data属性）更新完会执行的函数
    7. beforeDestroy
        实例被销毁之前会执行的函数
    8. destroyed
        实例被销毁后会执行的函数
3. VueRouter
    在前端做路由的
    1. 基本使用
        1. 先写路由
        2. 生成路由实例
        3. 将路由实例挂载到Vue对象上
        4. <router-link></router-link>
           <router-view></router-view>    <==> <router-view/>
    2. 路由的模糊匹配
        1. path: '/user/:name'     ---> $route.params.name
        2. /user/alex?age=9000     ---> $route.query.age
    3. 子路由
        children
    4. 编程式导航
        用JS代码去控制页面跳转
        this.$router.push(...)
4. Vue-CLI
    一个脚手架工具，帮助我们快速的搭建Vue项目
    1. 查看本机安装的vueCLI的版本
        vue -V    ---> 2.9.6
    2. 使用Vue CLI创建Vue项目
        vue init webpack mysite
5. 组件中捕获原生事件
    .native修饰符

一、编程式的导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

注意：如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <!--编程时导航-->
    <button @click="goHome">去首页</button>
    <button @click="goList">去列表</button>
    <router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    let home={
        template:'<div>home</div>'
    };
    let list={
        template:'<div>list</div>'
    }
    const routes=[
        {path:'/home',component:home},
        {path:'/list',component:list}
    ]
    let router=new VueRouter({
        routes:routes,
        linkActiveClass:'active'
    });
    //默认加载第一个路径
    router.push("/home");
    let vm=new Vue({
        el:"#app",
        methods:{
            //编程式导航
            goHome(){
                //页面跳转，push是增加到历史管理
                this.$router.history.push('/home')
                //go表示前进后退
                //this.$router.history.go(-1)
            },
            goList(){
                this.$router.history.push('/list')
                //将当前历史管理替换成list
                //this.$router.history.replace('/list')
            }
        },
        // 会在实例中提供两个属性this.$route(属性)，this.$router(方法);
        router:router,
    })
</script>
</html>

访问网页，效果如下：

Day92 编程式的导航,vue页面布局,marked包的使用 - 图1

二、vue页面布局

我们要完成这个效果

Day92 编程式的导航,vue页面布局,marked包的使用 - 图2

使用以下命令，创建一个vue项目，具体执行过程，请参考上一篇文章

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install bootstrap@3.3.7 -D
$ npm run dev

去除默认页面

进入目录my-project\src\router

查看index.js，在routes里面有一行，它表示组件HelloWorld

component: HelloWorld

查看上面的一行

import HelloWorld from '@/components/HelloWorld'

@表示src目录

@/components/HelloWorld 表示src\components\HelloWorld.vue

.vue后缀，可以不用写。

组件统一在目录中components

进入目录my-project\src\components，查看HelloWorld.vue

在之间的代码，就是默认首页，图片下面的一堆a标签。

修改之间的代码。HelloWorld.vue部分代码如下：

<template>
  <div class="hello">
      <h1>这是首页！！！</h1>
  </div>
</template>

返回上一级，打开App.vue文件，查看之间的代码

下面一行，表示一个图片。assets目录，可以放一些资源，比如图片之类的

<img src="./assets/logo.png">

再看下面一行

<router-view/>

它的完整代码是。是一个简写，它会自动闭合！

初学者，建议使用完整写法！

删除这2行代码，增加一个bootstrap的导航条

修改App.vue里面之间的代码，增加一个nav标签

修改App.vue里面之间的代码，导入bootstrap

修改App.vue里面