本文详细介绍了Vue Router的安装、基本使用、动态路由、导航守卫以及编程式导航等核心概念，并探讨了Vuex在状态管理中的角色，包括其安装、基本使用、以及如何通过getter、mutation和action处理状态。通过实例展示了如何在Vue应用中有效地管理和切换路由，以及如何利用Vuex实现组件间的数据共享和状态管理。
1.vue-router:
vue 插件
路由
作用
不同的url对应不同的组件-单页面开发-方便页面开发
2.安装vue-router
1.cdn
2.npm
3.vue-router.js
3.基本使用
new Vue({
el:"#app",
component:{
“student”:{
template:``
}
}
})
1.定义组件
var student={
//主要使用第二部分属性
template:`
<div>
<h1>student--list--</h1>
</div>
`
}
2.定义路由
var router=new VueRouter({
routes:[{
path:"/student",
component:student
},
{
path:"/teacher",
component:teacher
},
{
path:"/user",
component:user
}]
})
3.挂载到实例对象
new Vue({
el:"#app",
data:{},
router//es6的语法 属性名和属性值相同可以只写一个
})
<body>
<div id="app">
<h1>vue-router页面</h1>
<router-link to="/student">跳转到学生页面</router-link>
<router-link to="/teacher">跳转到教师页面</router-link>
<router-link to="/user">跳转到用户页面</router-link>
<router-view></router-view>
</div>
</body>
4.router-link中to属性的多种用法
1.<router-link to="/student"></router-link>//1.作为路径使用
注意to 除了直接跳转路径 访问每一个对象需要通过v-bind绑定，否则就是字符串
2.<router-link :to="student">跳转到student页面</router-link>2.//作为变量使用
3.<router-link :to="{path:"/student"}"3.//作为变量使用 用于传值
//怎么获取query或者params,通过created而不是data(设置值)
4.<router-link :to="{path:"/teacher" query:{id:9}}//传值类似于get方式
//获取在组件中的created(){}获取 通过$route.query获取
5.<router-link :to="{name:"组件名称",params:{id:10}}">传值类似于post方式
$route:每一个路由都具有的私有路由对象
$route.query:将参数拼接到地址栏上
5.组件命名
VueRouter({
routes:[{
path:"/",
name:"user-b",
component:student,
},{},{}]
})
6.重定向
当用户访问/a时，url会替换成/b，然后匹配路由为/b 类似于模拟点击，在定义路由中的第一个路径中写path:"/",component:"/想要加载的路径"
VueRouter({
routes:[{
path:"/",
name:"user-b",
component:student,
redirect:"",//类似于模拟点击
},{},{}]
})
7.别名 /a的别名时/b，意味着用户访问/b，url为b但是路由匹配为a路径，就像用户访问/a一样
$routes[{path:"/student",component:student,alias:"/b"}]
8.动态路由:动态路径参数 以冒号开头:
类似于详情页
如何根据不同参数加载不同页面
1.解决方案
1.通过watch监听$route
2.导航守卫/路由守卫-组件内守卫
相当于钩子函数
beforeRouteUpdate(to,from,next)
to:即将进内的路由
from:刚刚离开的路由
next:进入指定路由 next():直接进入to next(false):取消进入 next(router)//进入指定路由
beforeRouteEnter(to,from,next){
to:即将进入的路由
from:刚刚离开的路由
next:函数 next();//直接进入to next(false):取消进入 next(router)//进入指定路由
//注意:这个钩子函数不可以使用this,没有进来不知道当前this指向的实例对象，可以用vm代替this
next(function(vm){
console.log(vm.$route.params.id)
})
}
beforeRouteLeave(to,from,next){
if(confim("是否确定离开当前页面")){
next();
}else{
next(false);
}
}
3.全局守卫
全局前置守卫
写在定义路由之后
router.beforeEach((to,from,next)=>{
alert("即将进入一个新路由")
})
全局后置守卫
router.afterEach((to,from,next)=>{
alert("进入一个新路由")
})
4.路由独享守卫
在定义路由中
beforeEnter((to,from,next)=>{
alert("即将进入student路由")
next();//代表跳转
})
5.编程式导航
把router-link换成了button并且给按钮绑定事件,主要用于登录页面的验证
this.$router.push("/student") router全局路由对象
this.$router.replace({path:"/teacher",query:{id:15}})
this.$router.push({name:"user",params:{id:20}})
push//replace区别
push追加路由,会在histroy记录中添加记录
replace:替换当前路由,不会在history中添加记录
$router.back()//后退一个路由
$router.forward()//前进一个路由
$router.go(num)//后退/前进多少步
vuex:
1.作用
vue的状态管理机制(状态机)
主要管理数据状态
student//组件
加载所有班级:维护班级信息
teacher://组件
加载所有班级
user
student teacher重复代码写两次
1.可以通过全局声明后台数据window.clazz=data.clazz
然后局部student和teacher访问
缺点:1.污染全局变量 对公有数据的安全性没有保障 任意组件可以修改全局变量
2.组件传值
共享数据/变量过多 代码臃肿
3.vuex
维护共享数据信息 维护状态(不能直接修改数据)
2.vuex是vue的一个插件
3.不适合小型项目开发
专注于中大型项目
2.安装
1.cdn
2.npm
3.vuex.js
3.基本使用
1.//实例化
var store=Vuex.Store({
state:{
//状态:类似于data-不能直接修改，必须通过突变
list:[]
},
getters:{
//获取函数
},
mutations:{
//突变-类似于methods,不能执行异步请求
},
actions:{
//动作，类似于methods，可以执行异步请求
}
})
先进行actions，在执行mutations，再执行state
//2.注入vue实例中
new Vue({
el:"#app",
store
})
1936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
