Vue全家桶03

1.Vue-Router路由配置

使用 vue-router 之前，我们需要先配置访问的路径与要显示的组件的对应系。
我们需要在 router.js 文件中进行配置。

router/index.js
默认配置了两个路由:
1、当访问 / 时，显示 Home 组件
2、当访问 /about 时，显示 about 组件

2.Vue-Router路由切换

当我们定义好路由之后，我们就可以在页面中添加按钮跳转到相应的路由，
有两种跳转方法：
1、在 HTML 中使用 router-link标签（相当于a标签）
<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
</div>

说明：to 属性用来指定点击按钮时要切换到的路由

2、在 JS 中使用 router-push（this.$router.push("切换组件的地址")）
实现跳转（相当于 location.href ）

2.1 this.$router.push-js脚本中使用

 在 JS 中我们可以使用 this.$router.push 实现跳转。
login(){
  console.log( '登录成功' )
  // 跳转到 /
  this.$router.push('/主页面.vue')
}

总结：

路由切换的两种方式：

• router-link在HTML代码中使用
• this.$router.push在js脚本中使用