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,路径,VueRouter,router,路由,页面
来源： https://blog.csdn.net/XIJOANN/article/details/122017848