vue中$router和$route的基本使用
发现在自己在前端的道路上要一去不复返了,好了废话少说,开始记录。如果大家有什么问题,欢迎给我留言,一起交流探讨。: )一、路由基本概念1.route,表示一条路由信息。{ path: '/home', component: Home }2.routes,表示一组路由信息。const routes = [{ path: '/home', component: H...
·
发现在自己在前端的道路上要一去不复返了,好了废话少说,开始记录。
如果大家有什么问题,欢迎给我留言,一起交流探讨。: )
一、路由基本概念
1.route,表示一条路由信息。
{ path: '/home', component: Home }
2.routes,表示一组路由信息。
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
3. router
router可以理解为一个容器,或者说一种机制,它管理了一组route。简单来说,route只是进行了URL和函数的映射,而在当接收到一个URL之后,去路由映射表中查找相应的函数,这个过程是由router来处理的。
二、路由跳转
1.手写完整的path:
this.$router.push({path:`/user/${userId}`})
这种方式需要在路由中作如下配置:
{
path: '/user/:userId',
name: '***',
component: ***
}
这种接收参数的方式是this.$route.params.userId。 一定要注意接收参数是this.$route ,而不是this.$router。
2.使用params传递:
//不带参数 变成 ip/message
this.$router.push({name:'messsage',params:{id:'1'}})
3. 使用query传递
//带查询参数变成 ip/message?id=1
//带斜杠/代表从根目录出发,不会嵌套之前的路径
this.$router.push({path:'/message',query:{id:'1'})
query传参是针对path的,params传参是针对name的。接收参数的方式都差不多。this.$route.query和this.$route.params。
注意这只是跳转url,跳转到这个url显示什么组件,要配置路由。router跳转和<router-link>标签跳转,规则差不多。
4.使用<router-link>标签传递
<router-link :to="`/home/message/detail/${message.id}`">
在标签的to改为:to,然后在路由链接中附上参数,注意示例这种方式使用了模板字符串,当然也可以采取其他的拼串方法。灵活应变。接收方式一样,也是通过this.$route 接收。
三、注意事项
- 使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求。
- 如果提供了path,params将会被忽略(即如果要使用params传参,则一定要使用name),但是query不属于这种情况。如果使用完整路径和query传参,刷新页面时不会造成路由传参的参数丢失。
- router.push和router.replace的区别是:replace不会向 history 添加新记录,而是替换掉当前的 history 记录,即使用replace跳转到的网页后,点击'回退'会跳转到上上一个页面。上一个记录是不存在的。
更多推荐
所有评论(0)