如何安装vue-router,vue-router使用步骤
路由是网络工程中的一个技术术语，即通过互联将信息从源地址传递到目的地址的活动。本质上是一种对应关系。分为前端路由和后端路由。边肖将在下面的文章中给你详细介绍。感兴趣的朋友请和边肖一起学习。
目录
1、前端路由实现原理2、vue-Router基本使用2.1、安装2.2、配置路由2.3、实例化2.4、挂载路由2.5、在页面上添加router-link和router-view3、路由器模式3.1、哈希模式3.2、历史模式4、路由器-link属性4.1、tag属性4.2、replace属性4.3、active-class5、vue-Router页面跳转模式5.1、路由器-link实现5.2、实现
URL的请求地址对应服务器上的资源，根据不同的请求地址返回不同的资源。
后端路由：
在单页面应用中，根据用户触发的事件，在不刷新页面的情况下，改变URL，改变显示内容。
1、前端路由实现原理
前端路由：
当改变哈希值时，#是一个位置标识符，它可以在不刷新页面的情况下在页面内进行位置跳转。
通过location.hash更改页面的哈希值，URL 的 hash 模式
我们发现页面不会刷新。
URL历史模式
历史模式，如：
History.pushState() //推入堆栈
History.replaceState() //替换当前url，并且无法返回上一页
History.back() //返回上一页
history.go(n) //n的值可以大于0，表示向前几次，小于0，表示向后几次。
History.forward() //向前一步
History.go(-1)相当于history.back()
History.go(1)等效于history.forward()
有 5 种改变 url 而不刷新页面的方法，分别为：
角度有变化
React有ReactRouter
e有Vue-路由器。
2、vue-Router 基本使用
2.1、安装
npm安装vue-路由器-保存
使用vue-router的前提是必须使用vue。
前端三大框架，都有自己的路由：
从“vue”导入Vue
从“vue路由器”导入vue路由器
Vue.use(VueRouter) //引用Vue路由器插件
2.2、配置路由
//配置路由和组件之间的关系
恒定路线=[
{
路径：“/”，
//当访问“/”时，路由被重定向到新地址“/home”
重定向：“/home”，
},
{
路径：“/home”，
成分：家，
},
{
路径：“/login”，
组件：登录，
},
]
2.3、实例化
const router=new VueRouter({
Mode: history ，//设置模式
路线
});
2.4、挂载路由
转到main.js，实例化vue，在vue上挂载路由器。
let app=new Vue({
埃尔： #app ，
数据：{}，
//安装在vue上
路由器，
})
2.5、页面上添加 router-link 和 router-view
！-添加路线-
路由器链接到=/home 主页/路由器链接
Router-link to=/about 关于/router-link
！-显示路由内容-
路由器-视图/
默认情况下，路由器链接将呈现为标签在 router 文件夹内 index.js 引入vue-router。
路由器链接到=/home 主页/路由器链接
//呈现为
A= #/home rel=外部nofollow 主页/a
路由器视图用于占据一个位置，显示到该位置的路由对应的组件。
3、router 的模式
如：哈希和历史模式。
3.1、hash 模式
默认情况下，Vue路由器使用哈希模式。
hash的url中的锚点是#xx号之后的内容。通过使用锚点作为路由地址，我们通常会更改#号之后的内容，以便浏览器可以呈现指定的组件。当锚点改变时，onhashchange事件将被触发。
3.2、history 模式
历史是没有#号的普通url，使用时需要服务器配置。在历史模式下，对应的方法与上述五种方法相同。
路由模式有两种：vue-router
const router=new VueRouter({
模式：“历史”
})
4、router-link的属性
默认情况下，Router-link将呈现为一个A标记，但有时您可以将其呈现为另一个标记。
4.1、tag 属性
tag属性用于设置路由器链接标签呈现类型，例如，如果我们想要将路由器链接呈现为按钮，中可以指定需要的模式：。
路由器链接到=/home tag= button 主页/路由器链接
查看渲染后的元素，发现已经变成了按钮标签，对应的to添加的属性值会失效。此时你无法通过点击跳转到相应的内容，但是你可以继续阅读下面的跳转模式。
除了button，tag的属性值可以是任何其他的tag，router-link自动渲染相应的tag。
4.2、replace 属性
Replace对应上面历史模式中的replaceState，跳转时不会留下历史记录。如果指定了replace，则无法返回上一页。
路由器链接到=/home 替换主页/路由器链接
4.3、active-class
活动类别设置路由器链接单击当前选择的类别名称。默认情况下，类名为路由器链路活动。
a href=#/ rel=外部nofollow
aria-current=page
class= router-link-exact-active router-link-active
主页
/a
设置当前元素样式需要设置为：router-link-active。
如：
路由器-链接到=/active-class= active 主页/路由器-链接
//router-link-active类名将被替换为active
如果您需要将全局router-link的选择类名更改为用户自定义，单独设置它们会很麻烦，因此您可以在router中设置它们。
const router=new VueRouter({
路线，
模式：“哈希”，
LinkActiveClasss: active ///统一设置类名
})
5、vue-Rrouter 页面跳转方式
5.1、router-link 实现
//简单写一下
路由器链接到=/主页/路由器链接
//使用动态路径
路由器链接：to= { path:/ } /路由器链接
您可以使用路径或名称。
//通过参数传递跳转1
router-link :to=
{ name:home ，params:{ id:123 ，name:gq }}
/路由器链接
//通过参数传递跳转
router-link :to=
{路径：/，查询：{ id:123 ，名称： gq }}
/路由器链接
5.2、通过 js 实现跳转
//简单写一下
这个。$router.push({ path:/ })
//push与history.pushState相同
//带参数跳转
这个。$router.push({
name: home ，params: { id:123 ，name:gq }
})
//带有多个参数
这个。$router.push({
姓名：家，
params: { id:123 ，name:gq }，
查询：{ plan:private }
})
6、动态路由
在某些情况下，页面的路径path可能是不确定的，例如/user/123或/user/456。以下值是用户id或其他值。
设置 active-class ，如：
路由器：[
{
路径：“/user/:id”，
组件：()={ import(./views/user.vue) }
}
]
配置路由
路由器链接到=/user/123 用户：123/路由器链接
路由器链接到=/user/456 用户：456/路由器链接
//动态设置后面的id值
router-link:to= /user/ id user:{ { id } }/router-link
添加路由
这个。$route.params.id
这里的id是配置路由时设置的id，只要一致即可。
获取后边动态值
路由器-link to=/user？id=123 /路由器-链路
//当取值时
这个。$route.query.id
另外，这个。$router.addRoutes([])也可以添加动态路由，内部传输一个数组，与Routes配置相同。
7、路由的懒加载
懒加载是指用的时候再加载，不用的时候不加载。
构建应用时，js包会变得非常大，影响加载速度。如果能把不同路由对应的组件分成不同的代码块，然后在访问路由时加载相应的组件，效率会更高。
懒加载做了什么？主要功能是将路由对应的组件打包成一个js代码块。只有在访问路由时，才会加载相应的js。
//直接引用
从导入主页。/组件/主页
常量路由=[
{
路径：“/home”，
组件：主页
}
]
//惰性加载
常量路由=[
{
路径：“/home”，
component:()={ import(。/component/home) }
}
]
8、嵌套路由
实际上，它通常由多层嵌套组件组成。
方式二：使用 query 进行传参
实现步骤：创建相应的子组件，并在路由映射中配置相应的子路由。
第一：组件内部使用路由器视图标签。
{
路径：“/body”，
组件：()=导入( ./components/bodyLayout.vue )，
儿童：[
{
路径：“经理”，
组件：()=导入( ./components/blankView.vue )，
儿童：[
{
路径：“用户”，
组件：()=导入( ./views/manager/user . vue’)
},
]
},
]
}
当访问用户组件时，路径是：/body/manager/user
注意：在为嵌套路由设置路径时，不能添加“/”，否则路由将被更改。
{
路径：“/用户”，
组件：()=导入( ./views/manager/user . vue’)
}
//此时，访问路由变成了/user
9、router 与 route 区别
尝试在main.js中打印router。$路由器，第二：在任何组件中
我们发现这两个结果是相同的。这样我们就很容易理解下面的意思了。
路由器是VueRouter的一个实例，它有自己的方法，比如new VueRouter创建的实例。如果想导航到不同的url，可以使用router.push，它是在跳转模式中引入的。
Route是当前活动状态的route对象，包含当前路由的信息。通过这个对象，您可以获得路径、params参数、查询参数、名称、匹配和散列。
10、路由守卫
为什么要用导航卫士？我们来考虑一个需求：在SPA应用中，网页的标题是如何随着页面切换而变化的？
//添加相应的组件
已创建(){
Document.title= test
}
当访问该组件时，标题自动切换到Test。
如果用上面的方法，我们开发的组件就要加多少，太麻烦了，只好用路由卫士统一修改，方便维护。
10.1、全局守卫
打印结果如图：使用router.beforeEach注册一个全局前端保护，每当路由改变时，它都会通过。beforeEach接收的参数是一个函数，它包含三个参数。
router.beforeEach((收件人，发件人，下一个)={
//路由从从跳到
//我们只需要给路由添加一个name属性。
document.title=from.name
下一个()
})
注意：上述三个参数的顺序不能改变。Next不能丢，必须添加，否则页面跳转时无法进入下一步，卡在空白区。
1、使用router.afterEach注册全局后端保护。
router.afterEach((收件人，发件人)={
Console.log(后护板)
})
这两个守卫都是全局守卫，afterEach只在路由跳转完成后执行，所以不需要next。只有两个参数。
10.2、路由独享守卫
直接定义在route上的guard的使用方法与全局guard相同，只是它被放在route对象之一中，并且只有这个route起作用。
{
路径：“/test”，
名称：“测试”，
组件：()=导入( ./views/manager/test.vue )，
beforeEnter:(收件人，发件人，下一个)={
Console.log(测试进入前)
下一个()
}
}
这些保护与全局预保护具有相同的方法参数。
10.3、组件内守卫
路由和导航防护可以直接在路由组件中定义，在组件中定义的就是组件中的防护。
const Foo={
模板：` 1.`,
beforeRouteEnter(收件人，发件人，下一个){
//在确认呈现该组件的对应路径之前调用
//没有！可以！获取组件实例` this。
//因为在防护执行之前还没有创建组件实例。
},
beforeRouteUpdate(收件人，发件人，下一个){
//当当前路由改变，但组件被多路复用时调用
//比如对于一个带有动态参数的path /foo/:id，在/foo/1和/foo/2之间跳转时，
//由于将呈现相同的Foo组件，组件实例将被重用。在这种情况下这个钩子将被调用。
//可以访问组件实例` this。
},
beforeRouteLeave(收件人、发件人、下一个){
//当导航离开此组件的相应路线时调用
//可以访问组件实例` this。
}
}
2、在离开路线时执行beforeRouteLeave。必须添加下一条，否则无法正常跳转到下一条路线。
11、keep-alive
当路由切换时，每次都会重新呈现页面。我们有些组件会有一些数据需要保留，不想每次来回切换都要重新渲染，所以我们用keep-alive来包装组件，这样只有在第一次加载的时候才会执行created mounted之类的钩子函数。
Keep-alive是Vue的一个内置组件，可以保持包含的组件处于状态或者避免重新渲染。
div id=应用程序
路由器链接到=/home home/路由器链接
router-link to=/login 登录/router-link
点火电极
路由器视图/路由器视图
/保持活力
/div
添加保活组件。切换时组件只会第一次渲染组件，进入后不会重新渲染。
11.1、keep-alive 特定方法
已激活(){
console.log(已激活)
},
停用(){
console.log(停用)
}
这两个函数是有效的，只有当组件保持在状态并且使用了keep-alive时才会执行。
注意：
创建-安装-激活
停用将不会触发，直到它退出。
11.2、keep-alive 属性
keep-alive生命周期执行顺序：
Include-string或正则表达式，只有当它与组件匹配时才会被缓存。
Exclude-string或正则表达式，任何匹配的组件都不会被缓存。
保持活动包括=test
路由器视图/路由器视图
/保持活力
//测试组件添加名称属性
模板
差异
试验
/div
/模板
脚本
导出默认值{
名称：“测试”
}
脚本
此时，只有测试组件会被缓存，其他组件都不会被缓存。
如果有其他组件需要同时缓存，include可以添加多个值，用逗号分隔，但不能添加空格。
保持活动包括=测试，用户
路由器视图/路由器视图
/保持活力
keep-alive 有两个非常重要的属性：
保持活动排除=测试，用户
路由器视图/路由器视图
/保持活力
与上面的例子相反，只有两个组件test和user没有被缓存，其他的都被缓存了。
以上就是本文关于vue-Router安装原理的详细过程。有关vue-Router的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。