vue中$router以及$route的使用

43次阅读

共计 1309 个字符,预计需要花费 4 分钟才能阅读完成。

路由基本概念
route,它是一条路由。
{path: ‘/home’, component: Home}
routes,是一组路由。
const routes = [
{path: ‘/home’, component: Home},
{path: ‘/about’, component: About}
]
router 可以理解为一个容器,或者说一种机制,它管理了一组 route。简单来说,route 只是进行了 URL 和函数的映射,而在当接收到一个 URL 之后,去路由映射表中查找相应的函数,这个过程是由 router 来处理的。
const router = new VueRouter({
routes // routes: routes 的简写
})
VUE 中

$route 为当前 router 跳转对象里面可以获取 name、path、query、params 等。
$router 为 VueRouter 实例,想要导航到不同 URL,则使用 $router.push 方法,返回上一个 history 使用 $router.go 方法。跟上面说的一样,这里的 $router 就管理路由的跳转,英文里 er 结尾的都表示一种人,这里你可以把这个想象中一个管理者,他来控制路由去哪里(push、go),这样就比较容易记。

路由跳转
1 可以手写完整的 path:
this.$router.push({path:`/user/${userId}`})
这种方式需要在路由中作如下配置
{
path: ‘/user/:userId’,
name: ‘***’,
component: ***
}
这种接收参数的方式是 this.$route.params.userId。
2 也可以用 params 传递:
this.$router.push({name:’Login’,params:{id:’leelei’}})
// 不带参数 变成 ip/login
3 也可以用 query 传递:
this.$router.push({path:’/login’,query:{id:’leelei’})
// 带查询参数变成 ip/login?id=leelei
// 带斜杠 / 代表从根目录出发,不会嵌套之前的路径
query 传参是针对 path 的,params 传参是针对 name 的。。接收参数的方式都差不多。。this.$route.query. 和 this.$route.params.
注意这只是跳转 url,跳转到这个 url 显示什么组件,得配置路由。router 跳转和 <router-link> 标签跳转,规则差不多。
一些需要注意的事

使用 query 传参的话,会在浏览器的 url 栏看到传的参数类似于 get 请求,使用 params 传参的话则不会,类似于 post 请求。
如果提供了 path,params 将会被忽略(即如果要使用 params 传参,则一定要使用 name),但是 query 不属于这种情况。如果使用完整路径和 query 传参,刷新页面时不会造成路由传参的参数丢失。
router.push 和 router.replace 的区别是:replace 不会向 history 添加新记录,而是替换掉当前的 history 记录,即使用 replace 跳转到的网页‘后退’按钮不能点击。

最后
谢谢大家,如果有错误的地方请指出。

正文完
 0