争怎路由网/网站教程/内容

vue中$router与$route的容易介绍（附示例）

网站教程2024-05-26 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于vue中$router和$route的简单介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

路由基本概念

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的区别不会向 history 添加新记录，而是替换掉当前的 history 记录，即是使用replace跳转到的网页‘后退’按钮不能点击。
以上就是vue中$router和$route的简单介绍（附示例）的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:vue中$router与$route的容易介绍（附示例）
 
相关阅读