this.$router.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>this.$router 和 $route 的区别</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src='js/vue.min.js'></script>
<script type="text/javascript" src='js/vue-router.js'></script>
</head>
<body>
    <div id='router'>
      <h1>Hello App !</h1>
      <ul>
        <router-link tag='li' to='/home' >Go to Home</router-link><br/>
        <router-link tag='li' to='/new'> $route是当前的路由信息 {{$route}}</router-link>
      </ul>
      <router-view></router-view>
    </div>
    <script type="text/javascript">
      //1.创建组件
      const Home={
        template:`<span>我是主页</span>`
      };
      const News={
        template:`<span>我是新闻</span>`
      };
      //2.配置路由
      const routersname=[
          {
            path:'/home',name:'我是主页',component:Home
          },
          {
            path:'/new',name:'我是新闻',component:News
          },
          //重定向.相当于404，
          {
            path:'*',redirect:'/home'
          }
      ];
      //3.生成路由实例
      const router=new VueRouter({
        routes:routersname
            //此时 routers 和 routername 并不相等，所以不能在采用 es6 里面对象的简写方法
      });
  new Vue({
    el:'#router',
    router,
    mounted(){
        console.log('this.$router是路由的实例:');
        console.log(this.$router);
    }
  })
    </script>
</body>
</html>