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+...
医院网络架构设计与服务器集成仿真项目_基于思科模拟器实现多服务器配置与网络协议部署的综合性实验平台_通过构建包含DHCPDNSWEB及EMAIL服务器的中心机房并整合VLAN.zip
01-02
医院网络架构设计与服务器集成仿真项目_基于思科模拟器实现多服务器配置与网络协议部署的综合性实验平台_通过构建包含DHCPDNSWEB及EMAIL服务器的中心机房并整合VLAN.zip
基于DE2-115开发板使用VHDL硬件描述语言在QuartusII软件环境中设计并实现的一个具备完整时间显示手动校时与可编程闹铃功能的二十四小时制数字时钟系统_该核心项目通过.zip
01-02
基于DE2-115开发板使用VHDL硬件描述语言在QuartusII软件环境中设计并实现的一个具备完整时间显示手动校时与可编程闹铃功能的二十四小时制数字时钟系统_该核心项目通过.zip
SSM项目毕业设计压缩文件
最新发布
01-02
下载方式：https://pan.quark.cn/s/a4b39357ea24 对于个人的毕业设计项目，我们往往缺乏足够的了解（具体情况自行体会），但在需要进行个人答辩时，指导老师采用了一种教学策略。 该策略涉及选取一位同学的项目，并以此为基础开展模拟答辩活动。 若你对自己的代码感到困惑，希望加以理解，不妨参考这一资源进行学习。
FastAPI开箱即用项目模板_提供模块化架构设计数据库集成与Session管理功能_用于快速构建企业级Python后端API服务_基于FastAPI框架PostgreSQL数.zip
01-02
FastAPI开箱即用项目模板_提供模块化架构设计数据库集成与Session管理功能_用于快速构建企业级Python后端API服务_基于FastAPI框架PostgreSQL数.zip
Vue-router
02-11
### Vue Router 安装 为了使用 Vue Router，在项目中需先完成其安装。推荐的方式是利用 npm 或 yarn 来添加依赖： ```bash npm install vue-router # 或者 yarn add vue-router ``` 这一步骤确保了开发环境中有最新版本的 Vue Router 可供调用[^3]。 ### 配置 Vue Router 配置 Vue Router 主要涉及创建路由实例并将其挂载到 Vue 应用上。下面是一个简单的例子来展示如何设置基本的路由功能： ```javascript // 创建 routes.js 文件定义路径映射关系 import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, } ] const router = createRouter({ history: createWebHistory(), routes // 缩写为 `routes: routes` }) export default router; ``` 这段代码展示了如何导入必要的模块，定义页面组件对应的路径以及初始化路由器对象[^1]。 ### 使用 Vue Router 一旦完成了上述两步操作之后就可以在应用入口文件 main.js 中引入刚刚创建好的路由实例，并传给 Vue 实例： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样就成功集成了 Vue Router 到应用程序当中去了。 对于更复杂的场景比如嵌套路由、导航守卫等功能，则可以参阅官方文档获取更多指导。 ### 示例 这里给出一个完整的简单案例用于理解整个流程： #### 1. 安装 Vue 和 Vue Router 假设已经有一个基于 Vue CLI 初始化的新工程，执行如下命令即可获得所需库支持： ```bash npm install vue@next vue-router@next ``` #### 2. 设置路由表 编辑 src/router/index.js 添加如下内容： ```javascript import { createRouter, createWebHashHistory } from "vue-router"; import HelloWorld from "../components/HelloWorld"; const routes = [{ path: "/", component: HelloWorld }]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router; ``` #### 3. 修改主程序启动逻辑 最后调整 src/main.js 如下所示： ```javascript import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; createApp(App).use(router).mount("#app"); ``` 以上就是关于 Vue Router 的快速入门指南，涵盖了从零开始构建带有路由功能的应用所需的全部知识点。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值