Vue.js前端开发案例教程项目六 路由管理.pptx

;;路由管理;;;;;;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(前进或后退的步数)

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