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脚本中使用