VUE—Router的常用知识点（简单介绍）

标签：name   传参   一个   访问   数值   相同   声明式   方式   简单   

VUE—Router的常用知识点（简单介绍）

一、动态路由

在routers（定义路由） 中path：‘/user/:id‘,其中的id就是动态路由的标志。

上面表达所有的/user/****路由都会映射到相同的路径上，也就是说会访问到同一个页面。

二、嵌套路由

简单的理解就是父子路由，一个普通的路由中写

children:[
{
path:‘‘,
component:
}
]

三、路由跳转方式

编程式路由

router.push()

单击

<router-link :to="..."> 

等同于 router.push(...)

router.replace() : 刷新当前路由，与router.push很像，唯一不同就是，它不会向history添加新记录，而是自动替换掉当前的history记录。 等同于

<router-link :to="" replace>

router.go(n): 方法的的参数是一个整数，意思是在history记录中前进或者后退多少，类似于window.history.go(n)

router.go(1) : 前进一步

router.go(-1): 后退一步

路由跳转的时候可以传递参数，两种传参方式

编程式路由的传参方式

命名路由 (params)

router-push({ name:‘名称‘, params:{参数名:参数值}})

声明式路由导航：

<router-link :to="{name:‘‘,params:{参数名：参数值}}"></router-link>

查询参数(query)

router-push({path:’值‘, query:{参数名：参数值} })

这里需要注意的是params中只能使用name，不能使用path，而query中，都可以使用。

想要在另一个界面获取参数，可以使用: $route.params.参数名 来进行获取，参数查询的方式也是一样的。

声明式路由写法如上

VUE—Router的常用知识点（简单介绍）

标签：name   传参   一个   访问   数值   相同   声明式   方式   简单   

原文地址：https://www.cnblogs.com/AFBF/p/14906170.html