如何安装vue-router,install vue-router
Erouter是Vue.js的官方路线管理器.它与Vue.js的核心深度集成，可以轻松构建单页面应用。本文介绍了Vue路由器的安装和使用。
目录
安装
路由的基本配置
将路由器安装到Vue中
路由器相关配置Router.routes相关配置实现简单路由。
1.配置路由2。在组件中实现路由。
1.router-link用于实现路由的跳转组件：该组件支持的属性。
2.router-view根据VueRouter当前的配置，当路由路径发生变化时，渲染相应的路由视图组件。
安装
1.在现有的vue项目中手动安装Vue路由器。
npm安装-保存vue-路由器
2.使用vue-cli创建一个带有vue-router的新项目
选择/取消全选我取消选择。
vue创建项目名称
#Vue将询问您使用哪种配置。
默认([Vue 2] babel，eslint)
默认(Vue 3预览版)([Vue 3] babel，eslint)
手动选择功能
#请手动选择功能，Vue会询问您当前项目需要什么配置。
检查项目所需的功能：(按空格键选择，按a键切换全部，按I键反转选择)
(*)选择Vue版本
(*)巴别塔
( )打字稿
( )渐进式Web应用程序(PWA)支持
( )路由器
()Vuex
()CSS预处理程序
(*)棉绒/格式器
( )单元测试
()E2E测试
#请选择路由器，以下一系列询问将根据实际情况选择。
路由的基础配置
如果选择第一种安装方法(手动安装)，则需要在src文件夹下手动创建一个名为router的新文件夹，并创建一个新的index.js文件。
如果选择第二种安装方式(自定义安装)，不需要自己配置，新项目完成后直接使用即可。
将Router安装到Vue中
如果当前的Vue实例需要支持路由功能，那么Vue实例化时需要将Vuerouter的实例对象注入到Vue实例配置选项router中。(手动安装)
//src/路由器/index.js
从“Vue”导入vue介绍vue
从“vue路由器”导入vue路由器/介绍vue路由器
//Vue支持VueRouter
Vue.use(VueRouter)
Letrouter=newVueRouter() //初始化VueRouter
newVue({
路由器//将Vuerouter的实例对象配置到Vue实例化的配置对象的路由器选项中。
}).$ mount(“# app”)
main.js中的引用
//src/main.js
从导入路由器。/路由器
新Vue({
路由器，
render: h=h(App)
}).$ mount(“# app”)
Router的相关配置
属性名
类型
形容
路线
排列
当前路由器中所有路由配置
模式字符串
可选值：“哈希”/“历史”
默认值“哈希”。此模式下的路由使用哈希来确保路由与视图一致。历史模式使用h5添加window.history实现路由与视图一致。
linkActiveClass
字符串默认值：“路由器-链路-活动”
配置全局默认激活类
linkExactActiveClass
字符串默认值：“路由器-链路-精确-活动”
全局配置默认的精确激活类。
注意，严格匹配链接标签到路由路径必须全部等于当前浏览器的url，非严格匹配当前浏览器的url可以是当前链接的子路由。
例子
To=/home url=/home/user 不是完全匹配
to=/home URL=/home/user/10086 不是完全匹配。
To=/home url=/home 完全匹配。
to=/ URL=/order /是所有路由的根，因此它们不是严格匹配的。
Router.routes 的相关配置
{
路径：字符串，
组件？Component，//当前路由匹配时显示的路由组件。
名字？string，//命名路由
重定向？string Location Function，//路由重定向
道具？boolean 对象函数，//
别名？string Arraystring，//路由别名
孩子？ArrayRouteConfig，//嵌套路由
在进入之前？(to: route，from: route，next: function)=void，//路由守卫
区分大小写？boolean，//匹配规则区分大小写吗？(默认值：false)
}
实现一个简单的路由
1.配置路由
从“vue”导入vue
从“vue路由器”导入vue路由器
importAppfrom。/App.vue
importHomefrom。/视图/主页
importOrderfrom。/视图/订单
importUserfrom。/视图/用户
//Vue支持VueRouter
Vue.use(VueRouter)
letrouter=newVueRouter({
路线：[
{
路径：“/home”，
组件：主页
},
{
路径：“/order”，
组件：订单
},
{
路径：“/用户”，
组件：用户
}
]
})
newVue({
render:h=h(App)，
路由器
}).$ mount(“# app”)
2. 在组件中实现路由
VueRouter为Vue提供了两个组件。
路由器链接
路由器视图
1. router-link 用于实现路由的跳转组件：该组件支持的属性
To: string location当用户点击这个组件时，它会跳转到由To指定的路由。
//导航到指定的url
Router-linkto=/home 主页/router-link
Router-linkto=/order 订单/router-link
Router-linkto=/user 用户/路由器-link
/*导航到指定位置
expert er {
path:“/”，//指定跃点路由的路径。
Hash:#top //指定跃点路由的哈希值。
Name: Home ，//指定跳转的命名路由的名称值。
Params: {}，//指定跳转的路由Params对象。
Query: {} //指定跳转的路由传递查询键值对。
}
*/
路由器链接：to={path:/user} 用户/路由器链接
//使用位置进行页面跳转时，当前位置的params属性不能传递给路由组件的
Router-link: to= {path:/user ，hash: # top ，params: {ID: 1，name:晓明 }} 用户/路由器-link
//使用命名路由导航，可以将参数传递到任何命名的路由。
Router-link: to= {name: user ，hash: # top ，params: {ID: 1，name: Xiaoming }} 用户/路由器-link
//query支持名称导航和路径导航，传递对象属性时不建议使用query传递参数。
Router-link: to= {name: user ，hash: # top ，query: {ID: 1，name: Xiaoming }} 用户/路由器-link
Replace: bool当该属性为true时，路由的跳转会以替换的形式跳转到下一个页面(下一个路由会用要跳转的路由替换当前浏览器历史堆栈中的url)。默认值为false。
//使用替代形式跳转路线
路由器链接class= tab-item 替换为=/user 用户/路由器链接
Append: bool当该属性为true时，如果当前路由是相对路由(该路由没有/开头)，它将基于浏览器url进行下一次跳转。默认值为false。
//如果当前浏览器的网址/顺序
//点击Gec会跳转到/order/gec。
router-link to= gec appendgec/router-link
//点击Gec1因为Gec1的to不是相对于path append，路由会跳转到/gec。
router-link to=/gec appendge C1/router-link
//点击Gec2会跳转到/gec，不追加。
router-link to= gec ge C2/router-link
Tag: string指定使用什么DOM元素将router-link标记呈现给页面。默认值是。
//将路由器链接作为span元素呈现到页面
router-link tag= span class= tab-item to=/ home page/router-link
Active-class: string指定当前的路由器链接元素，如果与浏览器url不完全匹配，则指定类名。是实例化VueRouter时由linkActiveClass指定的默认值。
//当当前路由器链路不严格匹配时，类名为aaaa。
路由器链接active-class= AAAA to=/order 订单/路由器链接
Event: string Arraystring指定当前路由器链接元素，并声明可用于触发导航的事件。它可以是字符串或包含字符串的数组。是默认的单击。
//双击点击可以触发当前元素的路由跳转。
Router-link: event= [dblclick ， click ] to=/ home page/router-link
2. router-view 根据当前VueRouter的配置，当路由路由路径发生改变时渲染对应的路由视图组件
路由器视图组件是一个功能组件，渲染路径与视图组件相匹配。渲染组件还可以嵌入自己的路由器视图，并根据嵌套路径渲染嵌套组件。其他属性(除了名称，路由器视图不使用它)直接传递给渲染组件。在许多情况下，每条路线的数据都包含在路线参数中。
因为它也是一个组件，所以可以与transition和keep-alive一起使用。如果两者一起使用，请确保在内层使用keep-alive:
过渡名称=fade
点火电极
路由器视图/路由器视图
/保持活力
/过渡
以上是Vue-Router的安装和使用的详细说明。关于Vue-Router的安装和使用的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。