Vue-Router

最新推荐文章于 2024-12-10 17:10:00 发布
原创 最新推荐文章于 2024-12-10 17:10:00 发布 · 390 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Router的学习

一、简介

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
包含的功能有：

  1. 嵌套的路由/视图表
  2. 模块化的、基于组件的路由配置
  3. 路由参数、查询、通配符
  4. 基于 Vue.js 过渡系统的视图过渡效果
  5. 细粒度的导航控制
  6. 带有自动激活的 CSS class 的链接
  7. HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  8. 自定义的滚动条行为
    实际上用的最多的还是视图的跳转和拦截方面的操作

注：以下的项目案例都是下一个根据上一个案例继续进行的

二、使用

项目初始化

  1. 使用下列命令初始化项目
vue init webpack 1_router_use

为了更好的学习，所以不直接安装组件依赖，一步一步来
在这里插入图片描述
2. 删除components文件夹下的HelloWord.vue文件,并且删除App.vue中的多余标签，只留下图片中的样子，方便我们做案例

<template>
  <div id="app">
      主页面
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>
  1. 下载vue-router组件
npm install vue-router
  1. 在src下创建一个router的文件夹

1、模版页面跳转

  1. 在components文件夹创建一个login.vue文件和list.vue
<template>
  <div id="login">
    登录界面
  </div>
</template>

<script>
  export default {
    name: 'login'
  }
</script>

<style>

</style>

<template>
  <div id="list">
    列表页面
  </div>
</template>

<script>

  export default {
    name: 'list'
  }
</script>

<style>

</style>
  1. 在router文件夹创建一个index.js，因为index命名的文件为默认文件，所以我们以它为router的配置文件
//配置Vue-Router
//1、导入相关模块组件和要使用到的component模块，一般默认开头大写为组件
import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../components/login'
import List from '../components/list'

//2、安装路由
Vue.use(VueRouter);

//3、导出路由给其它文件使用
export default new VueRouter({
  routes:[
    {
      //路径
      path:'/login',
      //组件名称
      name:'loginView',
      //跳转去到的组件
      component:Login
    },
    {
      path:'/list',
      name:'listView',
      component:List
    }
  ]
})
  1. 在src/main.js添加刚刚写router/index.js模块依赖
import Vue from 'vue'
import App from './App'
//1、添加刚刚写router/index.js模块依赖
import Router from './router/index'

Vue.config.productionTip = false


new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router:Router//2、配置路由
})
  1. 在主页面添加<router-link></router-link>和<router-view></router-view>标签
<template>
  <div id="app">
      主页面
    <router-link to="/login">登录</router-link>
    <router-link to="/list">列表</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>
  1. 总结
    路由跳转有四步：
    （1、）写好componet页面
    （2、）配置只好路由的index.js配置文件
    （3、）在页面对应的js文件中导入路由，并且配置路由
    （4、）在vue页面天啊及<router-link></router-link>和<router-view></router-view>标签

2、路由嵌套

Vue的官方文档图片

  1. 在components文件夹创建一个userMessage.vue文件updateUserMessage.vue
<template>
  <div id="userMessage">
    个人用户信息展示页面
  </div>
</template>

<script>
  export default {
    name: 'userMessage'
  }
</script>

<style>

</style>


<template>
  <div id="updateUserMessage">
    个人用户信息更新页面
  </div>
</template>

<script>
  export default {
    name: 'updateUserMessage'
  }
</script>

<style>

</style>
  1. 修改router/index.js文件，添加嵌套路由
//配置Vue-Router
import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../components/login'
import List from '../components/list'
import UpdateUserMessage from '../components/updateUserMessage'
import UserMessage from '../components/userMessage'


Vue.use(VueRouter);

export default new VueRouter({
  routes:[
    {
      path:'/login',
      name:'loginView',
      component:Login
    },
    {
      path:'/list',
      name:'listView',
      component:List,
      //添加嵌套组件
      children: [
        //格式和之前的一样
            {
              path: '/updateUserMessage',
              name: 'updateUserMessageView',
              component: UpdateUserMessage
            },
            {
              path: '/userMessage',
              name: 'userMessageView',
              component: UserMessage
            }
      ]
    }
  ]
})
  1. 给要嵌套的组件添加<router-view></router-view>标签
<template>
  <div id="list">
    列表页面
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'list'
  }
</script>

<style>

</style>
  1. 总结:
    （1、）写好对应的子页面
    （2、）给router/index.js中需要嵌套的路由添加children属性
    （3、）给要嵌套的页面添加上要<router-view></router-view>标签

3、参数传递(不使用props解耦)

  1. 在src/components下创建一个selectById.vue
<template>
  <div id="selectById">
  	非解耦范式获取
    这是id为
    {{$route.params.id}}
    的用户信息
  </div>
</template>

<script>
  export default {
    name: 'selectById'
  }
</script>

<style>

</style>
  1. 添加到router/index.js路由配置中
//配置Vue-Router
//1、导入相关模块组件和要使用到的component模块，一般默认开头大写为组件
import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../components/login'
import List from '../components/list'
import UpdateUserMessage from '../components/updateUserMessage'
import UserMessage from '../components/userMessage'
import SelectById from '../components/selectById'

//2、安装路由
Vue.use(VueRouter);

//3、导出路由给其它文件使用
export default new VueRouter({
  routes:[
    {
      path:'/login',
      name:'loginView',
      component:Login
    },
    {
      path:'/list',
      name:'listView',
      component:List,
      //添加嵌套组件
      children: [
            {
              path: 'updateUserMessage',
              name: 'updateUserMessageView',
              component: UpdateUserMessage
            },
            {
              path: 'userMessage',
              name: 'userMessageView',
              component: UserMessage
            }
      ]
    },
    {
      //属性接收通过  :参数名
      path:'/selectById/:id',
      name:'selectByIdView',
      component:SelectById
    },

  ]
})
  1. 在App.vue中添加链接
<template>
  <div id="app">
      主页面
    <router-link to="/login">登录</router-link>
    <router-link to="/list">列表</router-link>
    <router-link to="/list/updateUserMessage">个人用户信息更新</router-link>
    <router-link to="/list/userMessage">个人用户信息展示页面</router-link>
	<!--name为我们在router/index.js配置的路由名-->
    <router-link :to="{name:'selectByIdView',params:{id:1}}">查询用户id为1的用户信息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>

4、参数传递(使用props解耦)

  1. 在src/components下创建一个SelectByAgePropsView..vue
<template>
  <div id="selectByAgeProps">
    解耦方式
    这是age为
    {{age}}
    的用户信息
  </div>
</template>

<script>
  export default {
    props:['age'],
    name: 'selectByAgeProps'
  }
</script>

<style>

</style>
  1. 添加到router/index.js路由配置中
//配置Vue-Router
//1、导入相关模块组件和要使用到的component模块，一般默认开头大写为组件
import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../components/login'
import List from '../components/list'
import UpdateUserMessage from '../components/updateUserMessage'
import UserMessage from '../components/userMessage'
import SelectById from '../components/selectById'
import SelectByAgeProps from '../components/selectByAgeProps'

//2、安装路由
Vue.use(VueRouter);

//3、导出路由给其它文件使用
export default new VueRouter({
  routes:[
    {
      path:'/login',
      name:'loginView',
      component:Login
    },
    {
      path:'/list',
      name:'listView',
      component:List,
      //添加嵌套组件
      children: [
            {
              path: 'updateUserMessage',
              name: 'updateUserMessageView',
              component: UpdateUserMessage
            },
            {
              path: 'userMessage',
              name: 'userMessageView',
              component: UserMessage
            }
      ]
    },
    {
      //属性接收通过  :参数名
      path:'/selectById/:id',
      name:'selectByIdView',
      component:SelectById
    },
    {
      path:'/selectByAgeProps/:age',
      name:'selectByAgePropsView',
      component:SelectByAgeProps,
      //props:true 解耦
      props:true
    },

  ]
})
  1. 在App.vue中添加链接
<template>
  <div id="app">
      主页面
    <router-link to="/login">登录</router-link>
    <router-link to="/list">列表</router-link>
    <router-link to="/list/updateUserMessage">个人用户信息更新</router-link>
    <router-link to="/list/userMessage">个人用户信息展示页面</router-link>

    <!--name为我们在router/index.js配置的路由名-->
    <router-link :to="{name:'selectByIdView',params:{id:1}}">查询用户id为1的用户信息</router-link>
    <router-link :to="{name:'selectByAgePropsView',params:{age:2}}">查询用户age为2的用户信息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>

5、重定向

  1. 在router/index.js路由配置添加一个goHome的路由
//配置Vue-Router
//1、导入相关模块组件和要使用到的component模块，一般默认开头大写为组件
import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../components/login'
import List from '../components/list'
import UpdateUserMessage from '../components/updateUserMessage'
import UserMessage from '../components/userMessage'
import SelectById from '../components/selectById'
import SelectByAgeProps from '../components/selectByAgeProps'

//2、安装路由
Vue.use(VueRouter);

//3、导出路由给其它文件使用
export default new VueRouter({
  routes:[
    {
      path:'/login',
      name:'loginView',
      component:Login
    },
    {
      path:'/list',
      name:'listView',
      component:List,
      //添加嵌套组件
      children: [
            {
              path: 'updateUserMessage',
              name: 'updateUserMessageView',
              component: UpdateUserMessage
            },
            {
              path: 'userMessage',
              name: 'userMessageView',
              component: UserMessage
            }
      ]
    },
    {
      //属性接收通过  :参数名
      path:'/selectById/:id',
      name:'selectByIdView',
      component:SelectById
    },
    {
      path:'/selectByAgeProps/:age',
      name:'selectByAgePropsView',
      component:SelectByAgeProps,
      //props:true 解耦
      props:true
    },
    {
      path:'/goHome',
      redirect:'/list'
    }

  ]
})
  1. 在App.vue中添加链接
<template>
  <div id="app">
      主页面
    <router-link to="/login">登录</router-link>
    <router-link to="/list">列表</router-link>
    <router-link to="/list/updateUserMessage">个人用户信息更新</router-link>
    <router-link to="/list/userMessage">个人用户信息展示页面</router-link>

    <!--name为我们在router/index.js配置的路由名-->
    <router-link :to="{name:'selectByIdView',params:{id:1}}">查询用户id为1的用户信息</router-link>
    <router-link :to="{name:'selectByAgePropsView',params:{age:2}}">查询用户age为2的用户信息</router-link>


    <router-link to="/goHome">重定向</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>
精选资源
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
精选资源
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
vue路由跳转传参和取参
goodStudy_H的博客
10-22 601
只跳一个路径 this.$router.push({path: '../schoolroll/schoolroll'}) 路径上传参 this.$router.push({path: '../schoolroll/schoolroll?province=' + this.province}) 取参 var province = this.$route.query.province...
router，路由跳转(router-link,useRoute,useRouter)，路由嵌套的使用
2203_75479159的博客
12-10 4416
Vue router,路由调换(router-link,userRoute,userRouter),路由嵌套的使用
Vue.router中的嵌套路由,和跳转的四种方式
最爱喝怡宝的博客
12-16 6015
嵌套路由（又叫 嵌套子路由）嵌套路由--- 通常由多层嵌套的组件组合而成。 1:router-view的细分 router-view第一层中，包含一个router-view 2:每一个坑挖好了，要对应单独的组件 路由配置 routes: [ { path:'/menu', name:'menu', component:menu, //路由嵌套增加
vue-router 路由&路由嵌套&跳转方法
liudachu的博客
09-25 5889
十一、vue-router路由 Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于Vue.js过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的CSS class的链接 HTML5历史模式或hash模式，在IE9中自动降级 自定义的滚动条行为 1. 安装 基于第一个vue-cli进行测试学习;先查看node_modules中是否存
vue实现路由跳转和嵌套（快速入门）
知行合一，跬步致远
06-20 7万+
vue-router路由的原理是通过改变网址，来实现页面的局部刷新，相比a标签跳转的不同之处在于，路由跳转不需要刷新整个页面。 一、路由跳转 1、安装路由vue-router: npm install vue-router 2、vue项目引入vue-ruoter： 3、配置路由（页面跳转）： 可以建一个专门用于路由的js文件，里面配置路径。 1）rout...
【vue-router】Vue-router如何实现路由懒加载
景天科技苑
11-29 6万+
在现代前端开发中，Vue.js凭借其轻量级和易用性，成为了很多开发者的首选框架。然而，在构建大型单页应用（SPA）时，初始加载时间可能会变得非常长，影响用户体验。为了解决这个问题，Vue.js引入了路由懒加载机制。本文将结合实际案例，详细讲解Vue-Router路由懒加载的用法。
【vue-router】vue-router如何实现动态路由
景天科技苑
11-28 6万+
在构建基于Vue.js的单页面应用（SPA）时，Vue Router是一个不可或缺的工具。它提供了声明式的路由功能，使开发者能够轻松地管理和控制应用内的导航逻辑。动态路由是Vue Router中的一项重要特性，它允许我们根据运行时的数据来动态地匹配路由。这对于需要根据用户输入或后端响应来调整应用行为的场景尤其有用。本文将详细介绍动态路由的概念、作用及其在Vue Router中的具体实现，并通过一系列实际案例来展示如何有效地使用这项功能。
Vue基础知识总结 11：前端路由vue-router
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
vue-router 详解
热门推荐
星海IT学习之路
01-16 12万+
文章目录1、认识vue-router2、安装和使用vue-router 1、认识vue-router 目前前端流行的三大框架，都有自己的路由实现： Angular的ngRouter React的ReactRouter Vue的vue-router vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/ vue-router是基于路由和组件的 路由用户设定访问
vue-router
青蛙king的博客
08-08 1万+
一、如何引入并使用Vue Router 使用 Vue.js 通过组合组件来组成单页面应用程序时，如何引入并使用Vue Router 呢？ 第一步，将组件 (components) 映射到路由。 第二步，告诉 Vue Router 在哪里渲染它们。 二、动态路由匹配 三、嵌套路由 四、编程式的导航 五、命名路由 六、命名视图 七、重定向和别名 八、路由组件传参 九、HTML5 History 模式 ...
精选资源
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
精选资源
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了...
精选资源
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
布线问题 分支限界算法-下载即用.zip
01-01
下载方式：https://pan.quark.cn/s/a4b39357ea24 布线问题（分支限界算法）是计算机科学和电子工程领域中一个广为人知的议题，它主要探讨如何在印刷电路板上定位两个节点间最短的连接路径。 在这一议题中，电路板被构建为一个包含 n×m 个方格的矩阵，每个方格能够被界定为可通行或不可通行，其核心任务是定位从初始点到最终点的最短路径。 分支限界算法是处理布线问题的一种常用策略。 该算法与回溯法有相似之处，但存在差异，分支限界法仅需获取满足约束条件的一个最优路径，并按照广度优先或最小成本优先的原则来探索解空间树。 树 T 被构建为子集树或排列树，在探索过程中，每个节点仅被赋予一次成为扩展节点的机会，且会一次性生成其全部子节点。 针对布线问题的解决，队列式分支限界法可以被采用。 从起始位置 a 出发，将其设定为首个扩展节点，并将与该扩展节点相邻且可通行的方格加入至活跃节点队列中，将这些方格标记为 1，即从起始方格 a 到这些方格的距离为 1。 随后，从活跃节点队列中提取队首节点作为下一个扩展节点，并将与当前扩展节点相邻且未标记的方格标记为 2，随后将这些方格存入活跃节点队列。 这一过程将持续进行，直至算法探测到目标方格 b 或活跃节点队列为空。 在实现上述算法时，必须定义一个类 Position 来表征电路板上方格的位置，其成员 row 和 col 分别指示方格所在的行和列。 在方格位置上，布线能够沿右、下、左、上四个方向展开。 这四个方向的移动分别被记为 0、1、2、3。 下述表格中，offset[i].row 和 offset[i].col（i=0,1,2,3）分别提供了沿这四个方向前进 1 步相对于当前方格的相对位移。 在 Java 编程语言中，可以使用二维数组...
EP1C3T144C8 FPGA开发板设计
01-01
先看效果： https://pan.quark.cn/s/03f8ba0ff118 ### FPGA开发板设计相关知识要点#### 1. FPGA基本概念- **定义**: 现场可编程门阵列（Field Programmable Gate Array, FPGA）属于半定制型集成电路，允许在完成制造后通过编程来设定其内部逻辑及连接配置，从而达成特定的功能实现。- **特性**: - 运行速度快 - 功耗相对较低 - 适用于复杂系统构建 - 可在现场进行重新编程- **应用范畴**: - 通信领域 - 自动控制系统 - 信息处理技术 - 数据加密方案 - 视频处理技术 - 车载电子系统 - 医疗器械设备等#### 2. EP1C3T144C8芯片介绍- **生产商**: Altera Corporation（现归属于Intel公司）- **系列归属**: Cyclone系列- **技术工艺**: 1.5V核心供电电压，采用0.13微米制造工艺- **资源参数**: - 包含2910个逻辑单元（LEs） - 提供高达59904位的嵌入式存储器 - 支持单个PLL（Phase Locked Loop，锁相环） - 最多可支持104个用户I/O接口- **优点**: - 价格经济 - 集成度高 - 片上资源丰富 - 灵活性强#### 3. 硬件电路设计原理##### 3.1 硬件电路整体构造- **构成部分**: - 下载电路: 负责将设计好的程序传送至FPGA中。 - 下载接口: 实现个人计算机与FPGA之间的数据交换。 - FPGA核心部件: EP1C3T144C8芯片。 - 电源电路: 提供必要的电源支持。 - 扩展接口: 用于连接各类传感器或扩展模块。###...
HIT-CSAPP2025大作业报告.doc
最新发布
01-01
HIT-CSAPP2025大作业报告.doc
NTC热敏电阻温度测量技术及线性电路
01-01
下载前必看：https://pan.quark.cn/s/9cf3e6e84d3a ntc-temperature-measurement NTC 热敏电阻温度测量原理、电路设计与代码实现 ！ ！ ！ 目前只是Test Board版本，后续更新硬件改进后的版本！ ！ ！ ntc-temperature-measurement/ ├── 32K闪存增强通用型MCU CH32V005 - 南京沁恒微电子股份有限公司 #Internet快捷方式 CH32V005官网网址 ├── CH32V006DS0.PDF # CH32V006/V005 数据手册 ├── CH32V00XRM.PDF # CH32V00X 应用手册 ├── zhca858a.pdf # TI参考文档：利用 NTC 电路感测温度 ├── Temp Measurement Design.ms14 # 参考TI的设计的电路 ├── 103F3950阻值对照表.doc # NTC电阻手册 ├── 阻值对照温度数据_0.1℃精度.txt ├── NTC/ # MounRiver工程 │ ├── NTC.wvproj # 工程WVPROJ文件 │ └── ......
Vue-router
02-11
### Vue Router 安装 为了使用 Vue Router，在项目中需先完成其安装。推荐的方式是利用 npm 或 yarn 来添加依赖： ```bash npm install vue-router # 或者 yarn add vue-router ``` 这一步骤确保了开发环境中有...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值