vue 路由router

最新推荐文章于 2023-11-22 21:28:10 发布
最新推荐文章于 2023-11-22 21:28:10 发布
阅读量591 收藏 1
点赞数 1
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38998319/article/details/118217675
版权

实现路由的切换

router/index.js

// 1.引入vue
import vue from 'vue'
// 2.引入VueRouter
import VueRouter from 'vue-router'

import Home from "../views/Home"
import About from "../views/About"
import Demo from "../views/demo01"

// 3.使用VueRouter
vue.use(VueRouter)

// 4.new 一个VueRouter对象赋值给一个常量
const r=new VueRouter({

  // 5.设置 路由方式
  mode:'history',

  // 6.在routers数组中写各种路由
  routes:[
    {
      // 7.在路由中写明路径和对应显示的组件
      path:"/",
      component:Home
    },
    {
      path:"/about",
      component:About
    },
    {
      path:"/demo",
      component:Demo
    }
  ]
})
// 8.将VueRouter开放出去
export default r

在views中新建组件,写点东西看的明显一点

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

在app.vue组件中写个标签,跳转到设置的路由

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <!-- 1.写一个跳转的标签跳转到对应的路由 -->
      <router-link to="/about">About</router-link>  |
      <button @click="fun()">demo页面</button>
    </div>
    <router-view />
  </div>
</template>

点击about,即可跳转到相应的路由并显示对应的组件

给路由发送数据 并在页面接收

app.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>  
      
      <!-- 1.添加一个按钮,触发methods中的方法 -->
      <button @click="fun()">demo页面</button>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return { str: "haha" };
  },
  methods: {
    fun() {
      // 2.在该方法中奖数据发送给路由对应的页面
      this.$router.push("/demo?name=" + this.str);
    },
  },
};
</script>

views中的demo01组件中

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h1>我是demo01</h1>
<!--1. 通过文本插值的方式获取值 -->
    <h2>我是获取到的数据{{ this.$route.query.name }}</h2>


<!-- 4.文本插值直接用自己的data数据即可 -->
    <h2>我是获取到的数据{{str}}</h2>
    
  </div>
</template>

<script>


export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  // 2.在data中定义一个变量
  data() {
    return{
      str: ""
    }
    
  },
  created() {
    // 3.通过created方法将数据赋给data中的变量
    this.str = this.$route.query.name;
  },
};
</script>

运行结果

路由数据传输方法二

1.App.vue中传入数据给demo路由

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <!-- 通过按钮的方式 -->
      <button @click="fun1()">点我跳转到demo页面</button>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data(){
    return{
      str:'我是App页面的数据'
    }
    
  },
  methods:{
    fun1() {
    // this.$router.push("/demo");
    // this.$router.push('/demo?name='+this.str)


    // --------------1.发送数据------------
    this.$router.push({
      path:'/demo',
      query:{
        name:this.str
      }
    })
  },
  }
  // -----------------------------------------
  
};
</script>

 2.在demo组件中接收数据

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>我是demo页面</h1>

<!-- --------------3.获取数据 -------------------->
<h2>我是获取到的数据---:{{ this.$route.query.name }}</h2>
<!-- -------------------------------------- -->
 
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    // HelloWorld
  }
}
</script>

 3.运行结果,点击demo按钮即可跳转到demo路由并显示接收到的数据

路由数据传输方法三

1.在App.vue页面中传给demo路由数据

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <!-- 通过按钮的方式 -->
      <button @click="fun1()">点我跳转到demo页面</button>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data(){
    return{
      str:'我是App页面的数据'
    }
    
  },
  methods:{
    fun1() {
    // this.$router.push("/demo");
    // this.$router.push('/demo?name='+this.str)
    // this.$router.push({
    //   path:'/demo',
    //   query:{
    //     name:this.str
    //   }
    // })


    // ------------------------第三种方式数据传输

    this.$router.push('/demo/123')
    // ------------------------------------------------
  },
  }
  
};
</script>

2.在router 中的 index.js 的路由中写入键名

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home"
import About from "../views/About"
import demo from "../views/demo"

Vue.use(VueRouter)
const r = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/',
      component: Home
    },
    {
      path: "/about",
      component: About

    },
    //====== 2.在路由中传入键名 id
    {
      path: "/demo/:id",
      component: demo

    },
    // ----------------------------------
  ]
})
export default r

 3.在demo.vue中接收数据

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>我是demo页面</h1>

<!-- <h2>我是获取到的数据---:{{ this.$route.query.name }}</h2> -->



<!-- -------------3.在demo页面中获取id------------------ -->
<h2>我是获取到的数据---:{{ this.$route.params.id }}</h2>
<!-- ---------------------------------------------------- -->




    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    // HelloWorld
  }
}
</script>

运行结果:点击demo按钮,跳转到demo路由,并显示数据

路由案例

通过路由实现一个简易的学生管理系统页面

目录结构

主页面.MyApp.vue 

<template>
  <div>
    <div class="top">
      <h2>学生管理系统</h2>
      <!-- 1.点击按钮向方法传要跳转的路由 -->
      <button class="btn btn-info" @click="tiao1('/xueyuan/wuliu')">物流学院</button>
      <button class="btn btn-info" @click="tiao1('/xueyuan/it')">计算机学院</button>
      <button class="btn btn-info">艺术学院</button>
      <button class="btn btn-info">外语学院</button>
    </div>
    <div class="">
        <router-view></router-view>
    </div>
   
  </div>
</template>

<script>
export default {
methods:{
    // 2.通过点击事件传过来的参数跳转到相应的路由
    tiao1(v){
        this.$router.push(v) 
    }
}
};
</script>
 
<style lang = "less" >
.top{
    height: 150px;
    width:100%;
    background-color: rgb(64, 80, 85);
}
.main{
    height: 800px;
    width:100%;
    background-color: rgb(229, 231, 225);
}
.left{
    float: left;
    width: 20%;
    height: 400px;
    background-color: rgb(92, 120, 133);
}
.right{
    float: left;
     width: 80%;
    height: 400px;
    background-color: rgb(112, 105, 116);
}
h2{
    text-align: center;
    height: 80px;
    line-height: 80px;
    margin-top: 30px;

}
.btn{
    margin-right: 30px;
}
</style>

在view页面中新建一个学院(xueyuan) 文件夹,在学院文件夹中新建两个.vue文件(it.vue   wuliu.vue)

it.vue()文件内容

<template>
  <div>
    <div class="main">
      <div class="left">
        <ul>
          <li><button class="btn btn-secondary" @click="tiao2('/xueyuan/it/')">计算机一班</button></li>
          <li><button class="btn btn-secondary"  @click="tiao2('/xueyuan/it/chass02')">计算机二班</button></li>
          <li><button class="btn btn-secondary"  @click="tiao2('/xueyuan/it/chass03')">计算机三班</button></li>
        </ul>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods:{
    tiao2(v){
      this.$router.push(v)
    }
  },
};
</script>
 
<style lang = "less" scoped>
ul{
  list-style: none;
  
}
li{
  margin-top: 40px;
}
</style>

路由页面:router中的index.js  

import vue from 'vue'
import VueRouter from 'vue-router'
vue.use(VueRouter)
const r = new VueRouter({
  mode: 'history',
  routes: [  
    {
      // -------------------------------------------------------
      // 在路由中设置路由和路由对应的页面
      path: "/xueyuan/wuliu",
      component: () => import("../views/xueyuan/wuliu.vue"),
      // ---------------------------------------------------------
      children: [
        {
          path: '/xueyuan/wuliu/',
          component: () => import("../views/wuliu/class01.vue")
        },
        {
          path: '/xueyuan/wuliu/chass02',
          component: () => import("../views/wuliu/class02.vue")
        },
        {
          path: '/xueyuan/wuliu/chass03',
          component: () => import("../views/wuliu/class03.vue")
        },  
      
    ]

    },
    {
           // -------------------------------------------------------
      // 在路由中设置路由和路由对应的页面
      path: "/xueyuan/it",
      component: () => import("../views/xueyuan/it.vue"),
         // ---------------------------------------------------------
      children: [
        {
          path: '/xueyuan/it/',
          component: () => import("../views/it/class01.vue")
        },
        {
          path: '/xueyuan/it/chass02',
          component: () => import("../views/it/class02.vue")
        },
        {
          path: '/xueyuan/it/chass03',
          component: () => import("../views/it/class03.vue")
        },     
    ]

    },
  ]
})

export default r
// 注:下面这个代码是为了重复访问当前页面不报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

此时完成了点击不同的学院显示不同学院对应的班级内容

实现点击不同的班级,右 侧显示不同的班级信息

已it.vue页面举个例子

<template>
  <div>
    <div class="main">
      <div class="left">
        <ul>
          <!-- 在it.vue页面中通过按钮的点击事件给tiao2方法传点击后要跳转的路由 -->
          <li><button class="btn btn-secondary" @click="tiao2('/xueyuan/it/')">计算机一班</button></li>
          <li><button class="btn btn-secondary"  @click="tiao2('/xueyuan/it/chass02')">计算机二班</button></li>
          <li><button class="btn btn-secondary"  @click="tiao2('/xueyuan/it/chass03')">计算机三班</button></li>
        </ul>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods:{
    // 2.在方法中通过接收到的路由,跳转到相应的路由,让router-vuew标签中显示相应路由对应的页面
    tiao2(v){
      this.$router.push(v)
    }
  },
};
</script>
 
<style lang = "less" scoped>
ul{
  list-style: none;
  
}
li{
  margin-top: 40px;
}
</style>

在原来的路由中嵌套一组子路由

router中的index页面

import vue from 'vue'
import VueRouter from 'vue-router'
vue.use(VueRouter)
const r = new VueRouter({
  mode: 'history',
  routes: [  
    {
     
      path: "/xueyuan/wuliu",
      component: () => import("../views/xueyuan/wuliu.vue"),
      children: [
        {
    //将此路由设置成和父级路由一样.这样当父级组件显示时,
    //此路由会默认也显示出来,实现第一个班级的信息不用点击,默认显示
          path: '/xueyuan/wuliu/',
          component: () => import("../views/wuliu/class01.vue")
        },
        {
          path: '/xueyuan/wuliu/chass02',
          component: () => import("../views/wuliu/class02.vue")
        },
        {
          path: '/xueyuan/wuliu/chass03',
          component: () => import("../views/wuliu/class03.vue")
        },  
      
    ]

    },
    {

      path: "/xueyuan/it",
      component: () => import("../views/xueyuan/it.vue"),
      // 在子内容中(/xueyuan/it路由页面控制下面的路由显示)嵌套一个子路由数组
      // 案例中为:点击左侧按钮显示的不同班级的信息
      children: [
        {
          path: '/xueyuan/it/',
          component: () => import("../views/it/class01.vue")
        },
        {
          path: '/xueyuan/it/chass02',
          component: () => import("../views/it/class02.vue")
        },
        {
          path: '/xueyuan/it/chass03',
          component: () => import("../views/it/class03.vue")
        },     
    ]

    },
  ]
})

export default r
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

补充每个班级信息的页面,这个页面没啥就是个普通的组件

<template>
  <div>
  


<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">计算机一班</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>
  </div>
</template>

<script>            
export default {
  data() {
    return {};
  },
};
</script>
 
<style lang = "less" scoped>
</style>

运行后可实现点击左侧的按钮,显示不同班级的信息

组件模块懒加载

router中的index.js文件中:

import vue from 'vue'
import VueRouter from 'vue-router'
vue.use(VueRouter)
const r = new VueRouter({
  mode: 'history',
  routes: [  
    {
     
      path: "/xueyuan/wuliu",
      component: () => import("../views/xueyuan/wuliu.vue"),
      children: [
        {
          path: '/xueyuan/wuliu/',
          component: () => import("../views/wuliu/class01.vue")
        },
        {
          // ------------------------------------------------------------------------------------------------
          path: '/xueyuan/wuliu/chass02',
          // 1.我们可以用图片懒加载的方式(箭头函数的方式)来代替import引入的方式
          component: () => import("../views/wuliu/class02.vue")
        },
        {
          path: '/xueyuan/wuliu/chass03',
          // 2.在文件路径之前加入 加入自定义命名的方式,可修改文件名,具体看图
          component: () => import(/*webpackChunkName:"xueyuanWuliuChass03"*/"../views/wuliu/class03.vue")
        },  
        // -----------------------------------------------------------------------------------------------
      
    ]

    },
    {

      path: "/xueyuan/it",
      component: () => import("../views/xueyuan/it.vue"),
      children: [
        {
          path: '/xueyuan/it/',
          component: () => import("../views/it/class01.vue")
        },
        {
          path: '/xueyuan/it/chass02',
          component: () => import("../views/it/class02.vue")
        },
        {
          path: '/xueyuan/it/chass03',
          component: () => import("../views/it/class03.vue")
        },     
    ]

    },
  ]
})

export default r
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

 2.运行结果

bootstrap的引入

1.先按contrl+c 将结束程序的运行,然后输入C:\Users\emma\Desktop\class\project>npm i bootstrap -S

在main.js文件中输入:import "bootstrap/dist/css/bootstrap.css",就可以在任何页面中使用了,注意使用时的版本要和 下载的版本保持一致.超过测试默认安装的bootstrap用 4版本好使

创建完成项目中下载vue-router  

在项目所在的目录中输入:

npm install vue-router

 

 2.此时打开项目在vscode中还是不能看到rorter文件

3.直接在doc命令窗口中输入:

vue add router

4.安装过程汇中有任何问题,输入yes即可 

5.再次运行,后打开查看vscode    发现和之前安装了router一样,运行结果也一样

 

子非鱼emma
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue-router 路由
weixin_46376652的博客
07-30 404
vue中的一个插件库，专门用来实现SPA应用；
vue-router路由
weixin_50443809的博客
05-15 235
目录 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 前端路由：key是路径，value是组件。 1.基本使用 安装vue-router，命令：```npm i vue-router``` （1）. 应用插件： ```Vue.use(VueRouter)``` （2）. 编写router配置项: 新创建的router文件夹的index.js中 //在新创建的router文件夹中 //引入VueRouter ...
vue-router项目实战总结篇
11-28
今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router。作为我们前后端分离很重要的实践之一，router帮我们完成了SPA应用间的页面跳转。 并且，配合axios这样的第三方库，我们可以实现配合后台接口的拦截器功能。 对于一个小型项目而言,router这个文件夹里面就包含了一个router.js就足够了， 但是，当我们的页面比较多的时候，我们就需要分出两个文件出来：一个定义我们的路由和组件，另一个实例化组件，并将路由挂载到vue的实例上。 基本的用法就不多赘述，大家可以看vue-router的官网，认真过一遍的话，基本使用肯定没什么问题。 1
重写VueRouter的push|replace
qq_60163657的博客
06-23 474
重写VueRouter的push|replace
vue-router重写push方法，解决相同路径跳转报错
热门推荐
u013595395的博客
11-05 1万+
修改vue-router的配置文件，默认位置router/index.js import Vue from 'vue' import Router from 'vue-router' /** * 重写路由的push方法 * 解决，相同路由跳转时，报错 * 添加，相同路由跳转时，触发watch (针对el-menu，仅限string方式传参，形如"view?id=5") */ co...
vue-router
2026的博客
10-22 1732
关于vue路由的基础知识点
重写Router的push方法
Xiaocong__的博客
02-14 1046
vue中，如果跳转同一个页面路由，虽不会影响功能，但是会报错 原因：路由的push会向历史记录栈中添加一个记录，同时跳转同一个路由页面，会造成一个重复的添加，导致页面的报错 解决方案：在router的index.js中重写vue的路由跳转push const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(th.
vue router小技巧
YoungMan_09的博客
06-07 1256
vue路由切换页面从顶部开始展示，解决路由重复跳转报错问题
vue-router重写Router.prototype.push，解决相同路径跳转的报错问题
weixin_45646663的博客
09-16 2523
vue-router的问题
vue路由的封装与使用
scclp的博客
11-30 3518
封装路由首先要明确的是业务需求，以及路由的基本原理 下面从几个点进行阐述： 1.关于路由的目录结构 router index.is routes is index.js文件里面存放的是关于路由的一些基本配置 index.js import Vue from 'vue' import VueRouter from "vue-router" import routes from '/routes' Vue.use(VueRouter) //......
Vue 重写push和replace方法，解决：Avoided redundant navigation to current location
最新发布
XunLin233的博客
11-22 691
我们输出一下引入的VueRouter构造函数，会发现在其prototype下的push方法和replace方法。既然push方法是我们引入的vue-router中的方法，那么我们就去找创建$router 的实例对象。但是使用这种方法治标不治本，难道我们每一次调用push和replace都要额外写两个回调函数吗？我们都知道，我们在使用一个Promise对象是时候需要配置成功执行函数和失败回调函数，所以我们只需要在使用push方法的时候额外传入一个成功回到函数和一个失败回调函数即可。
vue-router.js
12-30
vue路由vue-router.js文件下载
解决vue-router 嵌套路由没反应的问题
10-14
主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
从头开始学习vue-router
02-24
要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用<a></a>标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。这里的路由并不是指我们...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目实战-尚品汇(二)
sassssiii的博客
03-31 1748
day2-尚品汇2
重写VueRouter的push/replace方法
superfeng88的博客
07-28 2562
重写VueRouter的push/replace方法，遇到的问题及解决方案
重写rotuter.push方法
Mr__proto__的博客
04-01 210
vue2.6版本需要重新rotuter.push方法，因为这个版本要传入第二个和第三个参数 let originPush = VueRouter.prototype.push; let originReplace = VueRouter.prototype.replace; //重写VueRouter.prototype身上的push方法了 VueRouter.prototype.push = function(location, resolve, reject) { //第一个形参：路由跳转的配置对象
vue-router 路由跳转
09-02
Vue Router 是 Vue.js 官方的路由管理器，用于实现前端路由跳转。要进行路由跳转，你需要完成以下几个步骤： 1. 首先，确保你的项目中已经安装了 Vue Router。可以通过 npm 或 yarn 进行安装： ```bash npm ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值