vue路由router使用详解
2021/12/18 23:21:46
本文主要是介绍vue路由router使用详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.下载路由
安装命令
npm install vue-router
2.路由的使用步骤
1.导入路由(使用路由前需先引入vue,可以在main.js文件使用路由,但一般会新建router文件单独存放路由,此时就需要先引入vue)
import Vue from 'vue' import VueRouter from 'vue-router'
2.使用路由组件
Vue.use(VueRouter)
3.创建路由规则数组
// 创建路由规则数组 const routes = [ // 配置路由重定向(第一次打开项目默认显示某个页面) { // 项目第一次打开时路径是http://xxx.x.x:8000/ 这个/就是匹配的8000后面的/ path: '/', // 监测默认路径 redirect: '/login' // redirect(重定向):'代表要强制切换的路由路径' }, // 配置路由 { path: '/login', // 路由路径 component: ()=> import('@/views/login.vue') // 路由路径对应的页面 // 当路径为http://xxx.x.x:8000/#/login 就会跳转到login.vue页面 }, // 二级路由的配置 { path: '/layout', // 二级路由的父级路径 component: ()=> import('@/views/layout.vue'), // 父级页面 redirect: './layout/index', // 二级路由重定向,默认打开首页 // 配置二级路由需要在children属性下配置,格式与一级路由大同小异 // 区别: 二级路由path路径不需要 / 开头,直接写路径名即可 children:[ { path: 'index', component: ()=> import('@/views/index.vue') }, { path: 'articleList', component: ()=> import('@/views/articleList.vue') } ] }, // 路由会存在找不到资源报404的情况,可以配置自己的404页面,当找不到路径时显示404页面 { path: '*', component: NotFound } ]
4.创建路由对象传入规则
const router = new VueRouter({routes})
在路由对象里可以修改路由模式,将默认的哈希格式转成history模式
只需要在路由对象里配置mode: 'history' 即可
const router = new VueRouter({routes, mode: 'history'})
5.最后一步在入口文件main.js里
new Vue({ router, // 加入路由对象 render: h => h(App), }).$mount('#app')
注意:如果是在src文件下创建了router文件配置的router路由需要先将路由对象暴露出去,才能在入口文件使用路由对象
// 导出(暴露)路由对象 export default router
3. 重复跳转到同一个路径页面报错问题
1.原因: 重复点击同一个页面路径发生赘余导航,报错
2.解决方法: 在注册VueRouter路由组件的js页面添加以下代码即可
// 一般放在Vue.use(VueRouter) 下 // 解决反复跳转到同一个路由地址报错问题 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
这篇关于vue路由router使用详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-02Vue3项目实战:新手入门与初级技巧指南
- 2024-11-02Vue3教程:新手入门到实战项目
- 2024-11-02VueRouter4教程:新手入门指南
- 2024-11-02Vuex4项目实战:从入门到上手
- 2024-11-02在React中用Splide实现无限循环自动播放的轮播图组件
- 2024-11-02我用React打造了一个超炫的聊天App??
- 2024-11-02Vue3项目实战:新手入门与初级开发者指南
- 2024-11-02Vue3项目实战:从零开始构建你的第一个Vue3应用
- 2024-11-02VueRouter4项目实战:新手入门教程
- 2024-11-02Vue3入门教程:从零开始构建你的第一个Vue3应用