请简述vue-router路由的作用,vue router 默认路由
本文主要介绍vue路由器的路由配置方法。边肖认为这很好。现在分享给大家，给大家一个参考。来和边肖一起看看吧。
目录
使用路由插件的模块化方式使用路由声明性导航编程式导航动态路由匹配通配符匹配路由查询参数查询响应路由参数的变化命名路由、路由别名、重定向嵌套路由命名视图导航守卫(1)全局守卫(2)路由的独占守卫(3)组件中守卫的导航分析过程概述
模块化的方式使用路由插件
(1)安装
npm安装vue路由器
(2)建立文件目录。
在src目录下创建一个路由器文件夹，然后创建一个index.js
(3)这里我们以模块化的方式创建路由，便于代码管理。这里，我们只注册route插件，然后创建route对象。通过export default关键字公开创建的路由对象。
//index.js
从“vue路由器”导入vue路由器
从“vue”导入Vue
从以下位置导入主页./views/Home ；
Vue.use(VueRouter)//注册路由插件
导出默认的新VueRouter({
路线：[{
路径：“/”，
组件：主页
}]
})
(4)将创建的路由对象引入入口文件main.js，挂载到Vue实例中。
//main.js
从“vue”导入Vue
从导入应用程序。/App.vue
从“@/store”导入商店
从 @/router//导入路由器这里是我们创建的路由对象的介绍。模块化编程思维
Vue.config.productionTip=false
Vue.prototype.bus=new Vue()
新Vue({
店，
路由器，
render: h=h(App)，
}).$ mount(“# app”)
使用路由
声明式导航
可以理解为跳转是通过标签来执行的。
声明式导航：路由器-链接：to= . 或者路由器-链接到= .
定义路由规则
{
路径：“/”，
组件：主页
名称：首页
}
(1)路由器链接导航标签的to属性使用字符串模式。
路由器链接到=/转到主页/路由器链接
(2)路由器-链接导航标签到使用对象的方式
使用路径进行匹配
路由器链接：to={path:/} 转到主页/路由器链接
Router-link导航标签对属性采用对象化的方式，并采用路由名称进行匹配。
路由器链接：to={name:home} 转到主页/路由器链接
编程式导航
可以理解为JS来跳
程序化导航：router.push(.)
以下示例包含动态路径匹配和查询参数的知识。如果你不清楚，你可以先阅读两者的内容，然后再回到这里。
//字符串
router.push(home )
//对象
router.push({ path: home })
//命名的路由
router.push({ name: user ，params: { userId: 123 }})
//带查询参数，成为/register？计划=私人
router.push({ path: register ，query: { plan: private }})
注意:如果提供了路径，参数将被忽略。上述示例中的查询并非如此。相反，在下面的示例中，您需要提供与params协作的路由的名称，或者编写带有参数的完整路径：
const userId=123
router.push({ name: user ，params: { userId }}) //- /user/123
router . push({ path:`/user/$ { userId } `})//-/user/123
//此处的参数不生效
router.push({ path: /user ，params: { userId }}) //- /user
动态路由匹配
定义路由规则
{
路径：“/user/:id”，
组件：用户
姓名：用户
}
路由器链接到=/user/01 转到主页/路由器链接
路由器链接：to={path:/user/01} 转到主页/路由器链接
router-link :to={name:/user ，params={id:01}} 转到主页/router-link
通过以上方式定义，可以通过$route.params.id获得动态路由参数：id值为 01
注意：
按对象匹配时，不能使用路径和参数。仅通过名称和参数。
以下方式，路由规则{path:/user/:id}无法匹配，以下表达式只能理解为/user ，
即使*通配符与路径匹配，也不会传递params，因为如果您有属性路径，则不会解析params的属性。
{
//所有路径都将匹配
路径：“*”
}
{
//将匹配任何以“/user-”开头的路径。
路径：“/用户-*”
}
通配符匹配路径
我们通常使用*来捕获其他意外路径，彻底处理它们，并且通常导航到404错误页面。
路由器-link to="/user？姓名=张三./路由器链接
router-link :to={path:/user？张三 } ./路由器链接
router-link :to={path:/user ，查询：{name:张三 }} ./路由器链接
router-link :to={name:user ，查询：{name:张三 }} ./路由器链接
使用通配符时，名为pathMatch的参数会自动添加到$ route.params中。它包含URL与通配符匹配的部分。
查询参数query
路由器-link to="/user？姓名=张三./路由器链接
router-link :to={path:/user？张三 } ./路由器链接
router-link :to={path:/user ，查询：{name:张三 }} ./路由器链接
router-link :to={name:user ，查询：{name:张三 }} ./路由器链接
查询参数不想与动态路由参数匹配。即使使用了path，查询仍然可以用于传递参数。
上面查询传递的参数可以通过这个获得。$route.query.name
响应路由参数的变化
如果路线从/user/01导航到/user/02，则原始组件实例将被重用。因为有两条路线都呈现相同的组件，这意味着组件的生命周期挂钩将不会被再次调用。因此，有必要通过其他方式改变监控参数来进行响应。
(1)手表监控
const User={
模板：“.”,
观察：{
$路线(至，自){
//响应路线更改.
}
}
}
(2)由航标监控。
const User={
模板：“.”,
beforeRouteUpdate(收件人，发件人，下一个){
//对路由更改做出反应.
//不要忘记调用next()
}
}
命名路由，路由别名，重定向
特别是我把三者的概念放在一起解释，是为了更好的区分它们之间的区别。这些内容都是在路由规则去配置的。
{
路径：“/pageOne”，
组件：PageOne，
别名：“/第一页”，
名称：第一页，
重定向：{name:第二页 }
},
{
路径：“/第二页”，
组件：第二页，
名称：“第二页”
}
(1)给路线命名：可以理解为给这条路线起一个名字。
即使路由是由名称属性命名的
路线：[
{
路径：“/user/:userId”，
姓名：用户，
组件：用户
}
]
(2)路线别名：可以理解为这条路线的第二个名称。
比如/a的别名是/b，用户访问/b时URL会保持/b，但路由匹配的内容是/a，即知识URL的内容显示为/b，但内容实际上是/a。
注意：这里别名要用路径的方式表示，而不是像命名路由那样直接写名字~
const router=new VueRouter({
路线：[
{路径：“/a”，组件：A，别名：“/b”}
]
})
(3)重定向：可以理解为当你访问/a时，直接跳转到/b。
重定向的表达有三种形式：
字符串
const router=new VueRouter({
路线：[
{路径：“/a”，重定向：“/b”}
]
})
目标
const router=new VueRouter({
路线：[
{ path:“/a”，重定向：{ name:“foo”} }
]
})
方法
const router=new VueRouter({
路线：[
{路径：“/a”，重定向：到={
//该方法接收目标路由作为参数。
//返回重定向的字符串路径/路径对象
}}
]
})
嵌套路由
嵌套路由可以这样理解：匹配路由渲染的组件包含路由组件。当我们匹配一个路由时，我们呈现一个组件用户，但是如果我们想在用户组件的router-view /router-view中继续匹配。然后我们再进一步按/user/childRouteName匹配。“ChildRouteName”是路由规则子项中相应路径的值。
{
路径：“/用户”，
组件：用户，
儿童：[
{
//当/user//profile匹配成功时，
//用户配置文件将呈现在用户的路由器视图中。
路径：“配置文件”，
组件：用户配置文件
},
{
//当/user//帖子匹配成功时
//用户帖子将在用户的路由器视图中呈现。
路径：“帖子”，
组件：用户帖子
}
]
}
APP.Vue中
div id=应用程序
路由器视图/路由器视图
/div
User组件中
const User={
模板：` 1
div class=用户
用户组件/span
路由器视图/路由器视图
/div
`
}
注意：
定义嵌套路由时，即定义子路由时，它必须是一个完整的路由才能正确匹配。也就是/user/profile匹配成功，而/user无法匹配成功的时候。
命名视图
当多个视图同时渲染在一个组件上时，请注意，多个视图显示在同一级别，而不是嵌套的。此时，您可以通过命名视图来解决这个问题。
路由规则定义
{
路径：“/namingRoute”，
Components:{//注意，这里的Components是以 s 结尾的，但是之前单个的时候没有取。
默认：首页，
一：第一页，
第二页
}
}
组件定义
Router-view/router-view//呈现对应于默认的组件
router-view name= one /router-view//呈现对应于one的组件
router-view name= two /router-view//渲染组件对应两个
当URL为：/namingRoute时，如果匹配此路由，则根据对应的router-view视图组件进行渲染。
导航守卫
（1）全局守卫
可以理解为全局路由器实例对象路由器定义的防护。
Route.beforeEach
使用方式：
beforeEach((收件人，发件人，下一个)={
//.
})
Router.beforeResolve(全局解析保护)
在解析了所有内部保护和异步路由组件之后，调用解析保护。
使用方式：
router.beforeResolve((收件人，发件人，下一个)={
//.
})
Router.afterEach(全局post挂钩)
钩子将不接受下一个函数，也不会改变导航本身：
使用方式：
router.afterEach((收件人，发件人)={
//.
})
使用位置：通常是路由器文件夹下的index.js。
const router=new VueRouter({.})
//全球前沿卫士
router.beforeEach((收件人，发件人，下一个)={
//.
})
//全局分辨率保护
router.beforeResolve((收件人，发件人，下一个)={
//.
})
//全局post挂钩
router.afterEach((收件人，发件人)={
//.
})
（2）路由独享守卫
它可以理解为在路由规则上定义的防护。
输入前
（3）组件内守卫
可以理解为组件中定义的防护。
在RouteEnter之前
尚未创建组件实例，该实例将在确认路线之前被调用。
const User={
模板：` 1.`,
beforeRouteEnter(收件人，发件人，下一个){
//在确认呈现该组件的对应路径之前调用
//没有！可以！获取组件实例` this。
//因为在防护执行之前还没有创建组件实例。
}
}
注意：
防护不能直接使用它来访问vue实例对象，因为组件实例还没有被创建。但是，您可以通过将回调传递给下一个方法来定位组件的实例。
向next()传递一个回调，该回调只有在beforeRouteEnter中使用时才有效！
beforeRouteEnter(收件人，发件人，下一个){
接下来(虚拟机={
//通过“VM”访问组件实例。
})
}
BeforeRouteUpdate (2.2中的新功能)
当路线改变并且组件被取走时调用。
const User={
模板：` 1.`,
beforeRouteUpdate(收件人，发件人，下一个){
//当当前路由改变，但组件被多路复用时调用
//比如对于一个带有动态参数的path /foo/:id，在/foo/1和/foo/2之间跳转时，
//由于将呈现相同的Foo组件，组件实例将被重用。在这种情况下这个钩子将被调用。
//可以访问组件实例` this。
}
}
beforeRouteLeave
当离开与此组件对应的路线时调用。
const User={
模板：` 1.`,
beforeRouteLeave(收件人、发件人、下一个){
//当导航离开此组件的相应路线时调用
//可以访问组件实例` this。
}
}
导航解析的流程
正常第一访问路径的执行顺序
在每个全局路由前端保护之前
输入专用路由保护
beforeRouteEnter组件的路由保护
BeforeResolve全局路由解析保护
在每个全局路由post挂钩之后
Dom渲染
调用beforeRouteEnter组件的路由守卫传递给next的回调函数。并且创建号的组件实例作为回调函数的参数传入。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。