码迷,mamicode.com
首页 > 其他好文 > 详细

Vue-router

时间:2019-11-05 21:32:45      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:接收参数   replace   tee   nan   建立   历史   import   首页   class   

路由
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.属性="拿到的数据")
}

 

 

Vue-router

标签:接收参数   replace   tee   nan   建立   历史   import   首页   class   

原文地址:https://www.cnblogs.com/Scooby/p/11801471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!