Vue路由

最新推荐文章于 2024-07-24 14:58:19 发布
最新推荐文章于 2024-07-24 14:58:19 发布
阅读量97 收藏
点赞数 2
文章标签： vue.js javascript node.js npm 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47243325/article/details/120130693
版权

一. 安装路由

1.打开终端运行 npm install vue-router 安装 Vue Router

在这里插入图片描述
2.在main.js里添加路由，然后要通过 Vue.use() 明确地安装路由功能

在这里插入图片描述
基本组件不变

在这里插入图片描述

二.创建组件

1.src文件目录下会有一个router文件夹

在这里插入图片描述
三.渲染单个页面 （本地/#/test）

test文件渲染到app上

在这里插入图片描述

四.渲染两个页面（本地/#/test/test_c）

test文件的内容渲染到app文件上同时test_child文件渲染到test文件上

在这里插入图片描述

在这里插入图片描述

Kiraaa~
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 路由id_vue路由详解
weixin_33518100的博客
12-23 2770
自己看vue文档，难免有些地方不懂，自己整理一下，主要是vue-router具体实现的操作步骤。安装直接下载/CDNUnpkg.com提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像在 Vue 后面加载 vue-router，它会自动安装的：NPMnpm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use()...
Vue路由demo
08-03
Vue路由（Vue Router）是官方提供的强大路由管理器，它允许我们实现单页面应用（SPA）中的页面导航和状态管理。在Vue项目中，路由扮演着至关重要的角色，它帮助我们定义页面之间的跳转，并处理与这些跳转相关的数据...
vue下载
djh052900的博客
03-15 5094
第一步： 安装 node.js （如果已安装就不用装了，当然如果你想安装最新版本的node.js最好是从新安装一遍） node.js安装官网地址 https://nodejs.org/zh-cn/ 安装完成之后 win+r 键 打开运行 输入cmd 打开命令行窗口 输入 node -v 命令 打印出版本号 在输入 npm -v 命令 打印出版本号 可以输出版本号就安装成功了 切换npm安装源地址，输入命令 npm config set registry https://registry.n
Vue router的安装和搭建
weixin_50736511的博客
03-17 139
打开终端进入目标文件 下载 npm install vue-router --save 然后在src文件下面新建一个router在里面添加一个index.html 写入代码 //配置路由相关信息 import VueRouter from 'vue.router' import Vue from 'vue' //通过vue.use(插件)来安装插件 Vue.ues(VueRouter) //创建路由对象 const router=[ ] const router =new VueRouter({ /
vue-router安装
L2395183536的博客
01-30 204
vue-router安装 在项目的根目录打开终端 通过命令npm install vue-router下载 npm install vue-router 然后在main . js 中 1.导入 import VueRouter from 'vue-router' use一下 Vue.use(VueRouter) 3.创建路由 let router=new VueRouter({ import discovery from './components/03.discovery.vue' import
Vue中如何导入路由简单使用
qq_42874794的博客
10-13 9705
其实vue.router的使用，就是将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。 vue-router网址：https://router.vuejs.org/zh/guide/#html 1 在终端安装下载 cnpm install vue-router --save 2 在main.js中引入 import import Vue...
Vue 路由的基本使用
Errol's Blog
04-14 4237
文章目录路由的理解路由的基本使用一些注意点 路由的理解 生活中的路由： vue-router的理解： vue 的一个插件库，专门用来实现SPA应用(single page web application) 对SPA应用的理解： 1.单页Web应用(single page web application，SPA) 2.整个应用只有一个完整的页面 3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新 4.数据需要通过ajax请求获取 什么是路由? 1.—个路由就是一组映射关系 (key - value
vue路由配置
m0_57108418的博客
07-07 2万+
二、配置路由 在根目录下创建文件夹router，在router文件夹下创建index.js文件，如下图所示在index.js文件中写入如下代码，实现创建一个路由器 如上图，配置好了一个路由器，里面包含了2个路由，分别为student，school 路由在跟目录下创建view或者page文件夹，创建student，school两个路由（vue文件），如下图 在main.js中注册路由 编辑student.vue路由 编辑school.vue路由 在app.vue中进行路由的使用 四、效
vue路由传值
weixin_48879122的博客
09-21 5114
本篇文章讲述了vue路由传值的方法和区别;
Vue 路由重定向
热门推荐
Seric_xiao的博客
09-23 2万+
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面； 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向： var router = new VueRouter({ routes: [ // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址 //当用户在地址栏中输入`/`,会自动的跳转到`/user`,而`/user`对应的
vue 路由
01-08
Vue 路由是 Vue.js 应用程序中管理页面导航和状态的关键组成部分。它允许在不进行服务器请求的情况下切换视图，这对于单页应用程序（SPA）尤其重要。Vue Router 是 Vue.js 官方的路由库，它为 Vue.js 应用提供了前端...
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
vue路由切换时取消之前的所有请求操作
10-14
本文将详细讲解如何在Vue路由切换时取消之前的所有请求操作。 首先，我们需要了解Vue的`beforeEach`钩子函数，它是在每次路由切换前都会执行的全局守卫。我们可以在`main.js`文件中注册这个钩子，以确保在进入新的...
vue路由文件
04-25
Vue Router是Vue.js官方支持的路由管理器，用于处理单页面应用（SPA）的导航和页面间通信。在Vue项目中，路由扮演着至关重要的角色，它允许我们根据URL来动态加载和切换不同的组件，实现页面间的平滑过渡。 Vue ...
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 996
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
vue3 学习笔记17 -- 基于el-menu封装菜单
weixin_46328739的博客
07-23 154
前提条件：组件创建完成。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 978
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue3——利用自定义指令实现下拉框分页懒加载
最新发布
zmy967131的博客
07-24 166
vue3——利用自定义指令实现下拉框分页懒加载
vue路由
05-25
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。使用 Vue Router ，我们可以实现单页面应用中的路由跳转、参数传递、路由拦截等功能。下面是 Vue Router 的基本使用步骤： 1. 安装 Vue Router：使用 npm 安装 Vue Router。 ``` npm install vue-router ``` 2. 在 main.js 中引入 Vue Router。 ``` import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3. 创建路由实例并配置路由。 ``` const router = new VueRouter({ routes: [ { path: '/home', component: Home }, { path: '/about', component: About } ] }) ``` 4. 在 Vue 实例中挂载路由。 ``` new Vue({ router, render: h => h(App) }).$mount('#app') ``` 5. 在模板中使用路由。 ``` <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> ``` `to` 属性指定跳转的路径，`router-view` 显示对应路由组件的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值