昨夜风好大

最新推荐文章于 2026-01-08 16:39:17 发布

原创最新推荐文章于 2026-01-08 16:39:17 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文详细介绍了Vue Router的关键特性，包括动态路由的两种用法，如何解耦参数传递，查询字符串的传递方式，路由懒加载以减少初始加载负担，设置路由元数据实现动态页面标题，以及混入技术简化公共代码。同时，讨论了滚动行为的自定义以保持浏览位置，最后讲解了导航守卫的概念，帮助理解路由的高级控制。

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.导航守卫

如下官方文档：