基本信息
文件名称:Vue.js前端开发案例教程项目六 路由管理.pptx
文件大小:25.17 MB
总页数:90 页
更新时间:2025-03-04
总字数:约1.65千字
文档摘要

;;路由管理;;;;;;01;09;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;定义:命名路由是指为路由定义名称。

功能:为路由命名后,可以在定义导航链接时通过路由名称匹配相应的路由,避免因路径改变导致导航链接匹配不到路由。

用法:

①定义路由时,可以使用name属性命名路由,语法格式如下。

{path:路径,name:路由名,component:组件名}

②定义导航链接时,可以通过为to属性传递一个对象来匹配命名的路由,语法格式如下。

router-link:to={name:路由名,params:{参数名:参数值}}…/router-link

;定义:命名路由视图是指为路由视图定义名称。

功能:当路由中包含多个组件时,通过为路由视图命名,可以在页面的指定位置渲染路由中的指定组件。

;用法:

①定义包含多个组件的路由时,需要将?component?属性修改为?components?属性,并以对象的形式定义路由视图名与组件名之间的对应关系,语法格式如下。

{

path:路径,

components:{路由视图名:组件名,…}

}

②当路由中包含多个组件时,定义路由视图时,需要使用?name?属性命名路由视图,语法格式如下。

router-viewname=路由视图名/router-view

;;;;;;;功能:重定向可以实现将访问的?URL?地址强制转换为另一个?URL?地址,从而显示特定的页面内容。

用法:

①定义路由时,可以使用redirect属性设置重定向(定义重定向路由时,不需要为该路由定义对应的组件),语法格式如下。

{path:路径,redirect:重定向的路径}

②定向的路径对应的路由是一个命名的路由时,定义重定向路由的语法格式如下。

{path:路径,redirect:{name:路由名}}

;功能:别名用于为路由设置一个或多个额外的路径。为路由定义别名后,用户可以访问不同的?URL?地址查看相同的页面内容。

用法:定义路由时,可以使用?alias?属性定义别名,语法格式如下。

{path:路径,component:组件名,alias:别名}

特殊情况:若当前路由为嵌套路由,且子路由的别名以“/”开头,则用户访问含有子路径的?URL?地址时,不需要加上父路由的路径。;;;定义:先使用?VueRouter???供的?useRouter()函数获取路由实例,然后使用路由实例提供的方法实现导航,这种方式称为编程式导航。

用法:使用useRouter()函数获取路由实例的语法格式如下。

import{useRouter}fromvue-router

const路由实例=useRouter()

;1.push()方法

可以实现导航到不同的路由,该方法的参数可以是一个路径,也可以是一个描述路径的对象,语法格式如下。

路由实例名.push(路径)

路由实例名.push({path:路径})

路由实例名.push({name:路由名,params:{参数名:参数值}})

;2.replace()方法

与?push()方法类似,其区别在于,replace()方法在导航时不会向历史记录中添加新记录,而是直接替换当前的记录。

使用?replace()方法实现导航到不同的路由的示例代码如下。

router.replace(/user)

在声明式导航中,可以为router-link标签添加?replace?属性实现在导航时直接替换当前的记录,示例代码如下。

router-linkto=/userreplace/router-link

;3.go()方法

用于实现前进或后退的功能,语法格式如下。

路由实例名.go(前进或后退的步数)

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;评价项目;