1,动态路由
不同的路由访问相同的界面
...
{
name:'user',
path:'/user/:id',//动态匹配路径 /user/数字
component:User
}
...
<router-link :to="'/user/'+user.id">按钮</router-link> //方法一
<router-link :to="{name:'user',params:{id:user.id}}">按钮</router-link> //方法二
2,动态路由传递参数
{{$route.params.id}}
可以获取到传递过来的id。耦合度比较高
解耦合方法 在第一张图上加如下属性
props:true//将动态路由参数 解析当前组件组定义属性
在当前属性创建
props:['id']
引用直接 {{id}}
3,查询字符传递
<router-link :to="'/user?id='+user.id">按钮</router-link> //方法一
<router-link :to="{name:'user',query:{id:user.id}">按钮</router-link> //方法二
调用传递参数
{{$route.query.id}}
解耦写法
...
{
name:'user',
path:'/user',
component:User,
props: route=>({id:route.query.id})
}
...
调用传递的参数
在当前属性创建 props['id']
页面里{{id}}
4,路由懒加载
路由配置文件里引入太多组件,都同时加载,会造成卡顿,
component:()=>import('路径')
5,路由元数据
给不同路由设置不同的网页标题等
...
{
name:'home',
path:'/home',
component:()=> import('路径'), //数据懒加载
meta:{
title:'系统页面' //路由元数据
}
}
...
//在需要设置(home)的组件里 created生命周期里进行设置
created(){
document.title=this.router.meta.title //通过元数据 设置页面标题
}
6,混入
因为每个组件都需要设置 页头,名字,都设置出现大量公共代码 比较繁琐。
封装一个 在created生命周期设置标题的函数
在main.js添加混入模块
Vue.mixin(引入的封装的设置标题函数)、、t添加混入模块
这样一来就不需要在每个created生命周期里设置了。只需要在各自的meta属性下设置不同的title属性值
7,滚动行为
就是模块的切换,记住之前的模块的位置,再次访问是,依然是相同位置
let router =new VueRouter({
routers,
scrollbehavior(to,from,savePosition)=>{
return{x:0,y:0}//to去哪里,from来自哪里 最后一个参数应该是记录之前的位置 进制滚动行为 每次切换都返回顶部
}
})
//如果需要特定
if(from.fullPath==='/home'){
//记录位置
let y=savePosition && savePosition.y
localStorage.setTtem('homey',y)
//存在本地存储存
}
if(to.fullPath==='/home'){
//获取位置
let y=locallStorage.getItem('homey')
if(y){
return{x:0,y:parseFloat(y)}
}
}
8.导航守卫
如下官方文档:
。。。。散会