乱七八槽,反正上课很不认真听,天天打扰其他人 声明式路由: router-link编程式路由:this.$router.push({ path: /home }) // 通过拼接路径 // this.$router.push(`/detail/${index}`); // 通过...
乱七八槽,反正上课很不认真听,天天打扰其他人
声明式路由: router-link
编程式路由:this.$router.push({ path: "/home" })
// 通过拼接路径
// this.$router.push(`/detail/${index}`);
// 通过名字由跳转,命名路由 用params传参
// this.$router.push({ name: "detail", params: { id: index } });
//通过页面跳转 直接跳转到跟目录下的home页面
// this.$router.push({ path: "/home" });
<p>我的年龄是{{ $store.state.age }}</p>
methods: {
myClick() {
console.log("我的名字是:" + this.$store.state.name);
},
},
vuex (全局状态管理)
管理的数据是多页面需要共享的数据安装
1. npm install vuex --save2. 在src 下新建store文件夹,然后新建 index.js 文件
3. main.js 引入注册
4.挂载vuex
vue.use(Vuex)5. // 创建vuex对象
const store = new Vuex.Store({
state: {
// 存放的键值对就是管理状态
name: "hello"
}
})6. 取数据
this.$store.state.message
{{$store.state.message}}
本文标题为:vue 路由 取数据


- ajax实现输入提示效果 2023-02-14
- JS实现左侧菜单工具栏 2022-08-31
- javascript 判断当前浏览器版本并判断ie版本 2023-08-08
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15
- layui数据表格以及传数据方式 2022-12-13
- 基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
- jsPlumb+vue创建字段映射关系 2023-10-08
- 关于 html:如何从 css 表中删除边距和填充 2022-09-21
- 1 Vue - 简介 2023-10-08
- vue keep-alive 2023-10-08