前言
目标
vue-router的基本使用。
关键字
,,,,,
一、定义
通过组件实现动态渲染。
二、使用及场景
1 实现一个含登录和注册,点击不同按钮切换登录和注册页
2 引入依赖
使用npm安装: npm install vue-router --save
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
3 编码登录和注册
<div id="app">
<!--router-link来指定跳转的路径-->
<span><router-link to="/login">登录</router-link></span>
<span><router-link to="/register">注册</router-link></span>
<hr/>
<div>
<!--vue-router的锚点-->
<router-view></router-view>
</div>
</div>
4 创建router实例
// 创建VueRouter对象
const router = new VueRouter({
routes:[ // 编写路由规则
{
path:"/login", // 请求路径
component:loginForm // 组件名称
},
{path:"/register",component:registerForm},
]
})
routes:路由规则的数组,可以指定多个对象,每个对象是一条路由规则,包含以下属性:
path:路由的路径
component:组件名称
5 绑定注册到vue中
var vm = new Vue({
el:"#app",
components:{// 引用登录和注册组件
loginForm,
registerForm
},
router // 引用上面定义的router对象
})
总结
参考
官网:https://router.vuejs.org/zh-cn/
多留言多点赞你们的只支持是我坚持下去的动力,都支棱起来!!!