Vue 安装 Vue-router 路由安装以及使用

简介: Vue 安装 Vue-router 路由安装以及使用

vue-router 是 Vue 的一个插件库,适用于构建单页面应用。

单页面应用:整个应用中只有一个完整的页面,切换页面就是替换页面中的内容。

工作原理:当浏览器的路径发生改变时,路由器会自动显示路径所对应的组件。

嵌套路由:通过路由实现组件的嵌套展示,就叫做嵌套路由。

一. Vue-router 安装及配置:

:由于 vue-router 4 及以上的版本只能在 vue3 中使用,所以我们需要安装 vue-router 3 的版本。

安装指定版本:

npm install vue-router@版本号

安装最新版本:

npm install vue-router

二、创建路由组件:

在 src 目录下创建 views 文件夹,并创建 Home.vue 和 About.vue 组件。

<template>
    <div>
        <h1>Home页面</h1>
        <router-link to="/about">前往About页面</router-link>
    </div>
</template>
<script>
export default {
    name: "Home"
}
</script>
<template>
    <div>
        <h1>About页面</h1>
        <router-link to="/">前往Home首页</router-link>
    </div>
</template>
<script>
export default {
    name: "About"
}
</script>

备注:router-link 标签类似于 a 标签,而 to 属性和 a 标签的 href 属性作用相似。

三、配置 Vue-router:

在 src 目录下创建 router 文件夹,并在文件夹内创建 index.js 文件,添加以下内容。

// 引入Vue核心库
import Vue from 'vue'
// 引入vue-router
import VueRouter from 'vue-router'
// 应用vue-router插件
Vue.use(VueRouter)
// 引入组件(方式一)
import Home from '../views/Home.vue'
// 配置路由
const routes = [
  {
  // 路径,/ 表示首页
    path: '/',
    // 使用组件(方式一)
    component: Home
  },
  {
  // 路径
    path: '/about',
    // 引入并使用组件(方式二)
    component: () => import('../views/About.vue')
  }
]
// 创建路由器
const router = new VueRouter({
  routes
})
// 导出路由器
export default router

引入组件的区别:

方式一:直接导入,就是在应用第一次执行时,就会加载这个文件。

import Home from '../views/Home.vue'
component: Home

方式二:路由懒加载,就是跳转到这个页面的时候,再去加载这个文件。

component: () => import('../views/About.vue')

四、引入 Vue-router:

在 main.js 文件中引入 router,并挂载到 vue 实例上

import Vue from 'vue'
import App from './App.vue'
// 1.引入vue-router
import router from './router'
Vue.config.productionTip = false
new Vue({
  // 2.挂载到vue实例上
  router,
  render: h => h(App)
}).$mount('#app')

五、设置路由出口:

在 App.vue 组件中设置 router-view 标签,指定组件呈现位置。

<template>
  <router-view></router-view>
</template>

六、最终效果:

这样就配置好了,当点击链接时会修改浏览器的路径,从而显示对应的组件。

 

注意

 路由组件通常放在 views 文件夹内,而一般组件放在 components 文件夹内。

 跳转页面时,会先将当前组件销毁,再去加载新组件。

 每个组件都有自己的 $route 属性,里面存放着自己的路由信息。

 整个应用只有一个 $router 路由器,可以通过组件的 $router 属性获取。

原创作者:吴小糖

创作时间:2023.7.18

相关文章
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
151 1
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
11天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
7天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
58 8
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
30天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
156 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
111 58
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章