Vue-router

Posted 2020-11-30 scooby

路由
SPA: single page application 单页面应用
特点： 速度快，数据ajax请求，通过路由，页面不会整体重载
实现: 路由 -> 根据url的不同，加载组件

区别：https://www.cnblogs.com/nangezi/p/9201226.html

 

使用流程：

-1. 安装 : npm i vue-router -S
0. import VueRouter from ‘vue-router‘ -> Vue.use(VueRouter) 安装|注册到全局
1. 使用路由 (去哪)
<router-link to="/home">首页</router-link>
<router-view>展示区</router-view>
router-link 组件属性
tag=‘li‘ 指定编译后的标签
active-class=‘类名‘ 指定激活后的样式
2. 配置路由(建立组件和请求的对应关系) 数组
[{path:‘/home‘,component:home},,{}]
path 路径
component: 指向的组件变量名
3. 创建路由(传递配置)
router = new VueRouter(配置)
配置: {routes:数组}
4. 顶层|根组件，注册路由 （路由控制页面组件的加载）
选项
router(选项):router (router对象)
子路由：children
routes=[
{},
{
path:xx
component:xx
children:[ 子路由
{}
..
]
},
{}
]

参数配置:
{path:‘xx/:参数变量‘,component:xx}

传递参数 and 数据
router-link to=‘xx/参数?a=1b=2‘
router-link :to=‘{name:‘xx‘,params:{id:1},query:{a:2,b:3}}‘

接收参数和数据
模板: {{$route.params|query|path}}
组件: this.$route.xxx

子展示区替换父展示区

{
name:‘detail‘,
path: ‘/goods/:id‘,
component: Detail,
},

组件内部： this == 组件 this.方法|数据 访问组件自己的 this.$xxx 访问全局
this.$router
组件模板： {{xxx}} 子个的数据 {{this.$router}} 全局数据
@事件="$router.xx()"

编程式跳转:
router.push(...)
this.$router.push({name:‘...‘}) 添加一个路由 （记录到历史记录)
this.$router.replace({name:‘...‘}) 替换一个路由 （不记录到历史记录)
this.$router.go(-1|1)|back() 回退/前进 history.go|goBack

导航守卫: 路由授权|守卫

全局守卫/路由独享的守卫/组件内的守卫

beforeRouteEnter(to,from,next){} 前置守卫,进入
to 目标路由
from 当前路由
next 是个函数 next() == next(true) 运行跳转
next(false) 不让跳转
next(‘字符路径‘)/next({对象路径}) 重定向

beforeRouteLeave(to,from,next){} 后置守卫,离开

路由数据预载:
beforeRouteEnter(to,from,next){
1. 数据附加到目标路由上 to.query.数据名=值
2. next( _this => _this.属性="拿到的数据")
}