Vue2入门六：前端路由-Vue Router

合集 - Vue(9)
1.Vue2笔记2.Vue2入门一：基础概念3.Vue2入门二：组件化开发-组件与实例4.Vue2入门三：node、npm&Vue脚手架（安装vue2/vue3）&ESlint5.Vue2入门四：vuex6.Vue2入门五：前后端交互-Promise、fetch、axios和async/awai使用
7.Vue2入门六：前端路由-Vue Router
8.Vue2入门七：前端工程化（前端模块化）9.Vue3笔记
收起

路由：本质就是对应关系

后端路由：根据不同的URL地址分发不同的资源；

前端路由：根据不同的用户事件，显示不同的页面内容；本质是用户与事件处理函数直接的对应关系。（负责事件监听，触发事件后，通过事件函数渲染不同内容）

SPA：即单页面应用程序，整个页面只有一个页面，内容的变化通过Ajax更新实现、同时支持浏览器地址栏的前进和后退操作；spa的实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求)；在实现spa的过程中，最核心的技术点就是前端路由。

Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能有：支持HTML5历史模式或hash模式；支持嵌套路由；支持路由参数；支持编程式路由；支持命名路由；

  • 1、Vue-router的基本使用步骤

（1）引入相关的库文件
?
1
2
3
4
<!--导入Vue文件，为全局window对象挂载Vue构造函数-->
<script src="vue.js"></script>
<!--导入vue-router文件，为全局window对象挂载VueRouter构造函数-->
<script src="vue-router.js"></script>
（2）添加路由链接
?
1
2
3
4
<!--router-link 是vue中提供的标签，默认会被渲染为a标签-->
<!--to属性默认会渲染为href属性-->
<!--to属性的值默认会被渲染为#开头的hash地址-->
<router-link to="/user">User</router-link>
（3）添加路由填充位
?
1
2
3
<!--路由填充位（也叫做路由占位符）-->
<!--将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
<router-view></router-view>
（4）定义路由组件
?
1
2
3
const user = {
        template: `<div>User</div>`
       }   
（5）配置路由规则并创建路由实例
?
1
2
3
4
5
6
7
8
9
const router = new VueRouter({
        //routes是路由规则数组
        routes: [
            //每个路由规则都是一个配置对象，其中至少包含path和commponent两个属性：
            //path表示当前路由规则匹配的hash地址
            //component表示当前路由规则对应要展示的组件
            {path: '/user', component: User}
        ]
})
（6）把路由挂载到Vue根实例中
?
1
2
3
4
5
new Vue({
        el:'#app',
        //为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
        router
});

注：

路由重定向：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面；

通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

?
1
2
3
4
5
6
const router = new VueRouter({
        routes: [
            {path: '/', redirect: '/user'},
            {path: '/user', component: User}
        ]
})

  • 2、Vue-router嵌套路由用法

（1）用法
 ①嵌套路由功能分析：
点击父级路由链接显示模板内容；模板内容中又有子级路由链接；点击子级路由链接显示子级模板内容；
 ②父路由组件模板
父级路由链接；父组件路由填充位；
③子路由模板
子级路由链接；子级路由填充位；
④嵌套路由配置
父级路由通过children属性配置子级路由；
 （2）示例

　　

  • 3、Vue-router动态路由匹配用法

（1）用法

应用场景：通过动态路由参数的模式进行路由匹配

?
1
2
3
4
5
6
7
8
9
10
11
var router=new VueRouter({
   routes:[
       //动态路径参数 以冒号开头
       {path:'/user:id',component:User}    
     ]
});
 
const User={
   //路由租金中通过$route.params获取路由参数
   template:'<template>User{{$route.params.id}}</div>'      
}

调用：

?
1
<router-link to="/user/1">User1</router-link>

（2）路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。

①props的值为布尔类型

?
1
2
3
4
5
6
7
8
9
10
11
12
var router=new VueRouter({
   routes:[
       //如果props被设置为true，route.params将会被设置为组件属性
       {path:'/user:id',component:User，props:true}    
     ]
});
 
const User={
   props:['id'],//使用props接收路由参数    
   //使用路由参数
   template:'<template>User{{id}}</div>'      
}

 ②props的值为对象类型

?
1
2
3
4
5
6
7
8
9
10
11
12
var router=new VueRouter({
   routes:[
       //如果props是一个对象，它会被按原样设置为组件属性
       {path:'/user:id',component:User，props:{uname:'lisi',age:12}}    
     ]
});
 
const User={
   props:['uname','age'],//使用props接收路由参数    
   //使用路由参数
   template:'<template>User{{uname +'-----'+age}}</div>'      
}

 ③props的值为函数类型

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var router=new VueRouter({
   routes:[
       //如果props是一个函数，则这个函数接收route对象为自己的形参
       {path:'/user:id',
        component:User，
        props:route=>({uname:'zs',age:20,id:route.params.id})}    
     ]
});
 
const User={
   props:['uname','age','id'],//使用props接收路由参数    
   //使用路由参数
   template:'<template>User{{uname +'----'+age+'----'id}}</div>'      
}       

  • 4、Vue-router命名路由用法

（1）命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

?
1
2
3
4
5
6
7
const router=new VueRouter({
   routes:[
       path:'/user/:id',
       name:'user',
       component:User      
    ]
})

 调用：

?
1
2
3
<router-link :to="name:'user",params:{id:123}>User</router-link>
 
router.push({name:'user',params:{id:123}})

  • 5、Vue-router声明式导航

（1）页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航。如：普通网页中的<a></a>或vue中的<router-link></router-link>

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航。如：普通网页中的locations.href

（2）编程式导航基本用法

常用的编程式导航API如：this.$router.push('路由路径')和this.$router.push('路由路径?参数名=参数值')

  • 6、Vue-router编程式导航

（1）页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航。如：普通网页中的<a></a>或vue中的<router-link></router-link>

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航。如：普通网页中的locations.href

（2）编程式导航基本用法

常用的编程式导航API如：this.$router.push('hash地址')和this.$router.go(n)

?
1
2
3
4
5
6
7
8
9
const User={
   template:'<div><button @click="goRegister">跳转到注册页面</button></div>',
   methods:{
       goRegister:function(){
            //用编程的方式控制路由跳转
            this.$router.push('/register');   
        }
    }     
}

 （3）编程式导航参数规则

router.push()方法的参数规则：

 获取参数：

 

 
 
posted @   权杖攻城狮  阅读(257)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？
点击右上角即可分享
微信分享提示

目录导航