vue router区别,什么是vue-router
本文主要介绍vue中$router和$route的区别。对vue感兴趣的同学一定要看看。
我们通常在vue项目中使用路由，vue-router是vue.js的官方路由管理器
这个。$route:当前活动路线的信息对象。每个对象都是本地的，可以获得当前路径的属性，如路径、名称、参数、查询等。
这个。$router:一个全局路由器实例。路由器实例注入到vue的根实例中，再注入到各个子组件中，这样整个应用就有了路由功能。它包含了很多属性和对象(比如历史对象)，任何页面都可以调用它的push()、replace()、go()等方法。
用过vue的童鞋都知道路由跳转分为编程式和声明式。
声明类型：
简单地说，router-link组件用于导航，链接是通过传入to属性来指定的(router-link将默认呈现为A标记)。
当需要在一个页面中嵌套子路由而页面不跳转时，这个方法应该不会太好用。哈哈哈.只需在路由器视图中呈现子页面。
编程公式：
这样就需要导入VueRouter并调用它。
然后我就说说vue-router的使用方法(以下是程序化的方式):
1.定义两个单。路由跳的vue组件：home.vue和user.vue；
2.导入vue、vue路由器和定义路由。每个路由都包含一个组件属性，该属性映射一个组件- router.js
从“vue”导入Vue
从“vue路由器”导入路由器
从导入主页。/home.vue
从导入用户。/user.vue
Vue.use(路由器)；
3.创建一个路由器实例，并传递路由器配置- router.js
常量路由=[
{ path:“/Home”，组件：Home }，
{路径：“/用户”，组件：用户}
]
常量路由器=新路由器({
路线
})
4.将该路由注入到vue的根实例中，这样就可以在任何其他组件——main . js中访问该路由
从导入路由器。/路由器
新Vue({
路由器，
render: h=h(App)
}).$ mount(“# app”)
这就是所有的步骤。
好了，我们的猪脚开始出现了！~ *在上面的用户和家庭组件中有两种方法可以访问路线：这个。$路由器和这个。$route。两种方法大致相同，但还是有区别的。(如下所示)
你可以看到这个。$route显示当前活动路线的信息对象。这个对象是本地的，可以获取路径、名称、参数、查询等属性。目前路线的，这里就不赘述了。
其中$route.matched是包含当前路线的所有嵌套记录的数组，即路线配置中的对象数组，包括它们自己的信息和子数据。例如，我的路线配置为：
const router=new VueRouter({
路线：[
//下面的对象是路由记录
{
路径：“/taskList”，
组件：任务列表，
名称：“任务列表”，
儿童：[
{
路径：“/taskDetail”，
组件：任务详细信息，
名称：“任务详细信息”
}
]
}
]
})
在此得到匹配的展开结果。$路线如下：
比如导航卫士用于登录功能时，如果需要检查meta来确定是否需要登录，可以通过遍历$ route.matched来检查路由记录中的meta字段。
此外，在vue实例中，您还可以通过这个访问路由实例。$router，这是一个全局路由实例。路由器实例注入到vue的根实例中，再注入到各个子组件中，这样整个应用就有了路由功能。打印这个。$router在任何子组件中，以获得以下内容：
它包含了很多属性和对象(比如历史对象)，任何页面都可以调用它的push()、replace()、go()等方法。
push()方法将向历史记录中添加一条记录。当您单击浏览器的后退按钮时，可以返回到上一页。当我们点击路由器链接到= ./，相当于调用这个。$router.push()。
这个的参数。$router.push()方法可以是字符串路径或地址对象，例如：
这个。$router.push(home )这个。$router.push({path: home})
您也可以携带参数，但是注意：如果提供了path，参数将被忽略，例如：
这个。$ router.push ({path: home ，params: {page: 2}})此处的参数将被忽略。
同样的规则也适用于router-link的to属性。
您可以使用以下方法：
这个。$ router . push({ path:`/home/$ { page=2 } ` `})
这个。$router.push({name: home ，params: { page: 2}})
这个。$router.push({path: home ，query: { page: 2}})
这些方法获取参数的方式。$ route.params.page/this. $ route . query . page
这就是vue中$router和$route区别的细节。更多关于vue的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。