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