Vue router安装、新建router、跳转及如何固定显示想要的页面

最新推荐文章于 2024-07-24 08:52:32 发布
最新推荐文章于 2024-07-24 08:52:32 发布
阅读量625 收藏 1
点赞数
分类专栏： vue知识点 Vue router安装、新建router、跳转及如何固定显示想要的页 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44718512/article/details/107556582
版权
本文详细介绍了Vue Router的安装过程，包括npm和yarn两种方式，以及如何新建router.js并配置默认路由。同时，展示了新建组件、路由跳转的方法，特别是如何在router.js中设置固定显示的页面。最后，通过代码示例说明如何在Home页面下导入并展示其他组件。
摘要由CSDN通过智能技术生成

一、 Vue router安装

【1】下载vue router

命令如下：
1.npm install vue-router
2.cnpm install vue-router
3.yarn add vue-router（这里推荐使用第三种方法，速度快报错几率小）

【2】操作

1.在src页面下下新建router.js，并引入如下代码

在这里插入图片描述
2.在components中新建Conten.vue，
注意：此处的目录不是必须的，在哪里建的后续保持一致即可
在这里插入图片描述

3.在src页面下中新建view文件夹，在view新建例如：Home文件夹，在文件夹中新建index.vue，导入上一步的Content并引入如下代码：
在这里插入图片描述
4、在router.js中设置如下两步
1、import Home from ‘./vie

最低0.47元/天 解锁文章
kashappy
关注
专栏目录
Vue3 - 实现路由 “新开一页“ 进行页面跳转功能，Router 路由跳转时在新窗口打开页面（网站跳转页面时浏览器新开页签打开网页，支持在页面、纯 js/ts 文件中使用，详细示例代码教程）
王佳斌
11-28 9398
vue3，router路由，vue3怎么实现路由跳转支持新窗口打开，vue3路由跳转新开一页，vue3打开新页面路由跳转，vue3网页如何让浏览器打开新页签跳转页面，vue3怎么实现路由跳转支持新窗口打开，跳转时打开新页面，vue3跳转到一个新页面怎么实现，vue3页面跳转新开一个页面，vue3页面实现跳转到新的标签页，vue3编程式导航如何打开新窗口实现，vue3在js文件中如何实现路由跳转新开窗口，vue3在纯ts文件中页面跳转怎么新开窗口，vue3纯js/ts文件里跳转新页面时新开一页新窗口，Vue3
vue中使用路由router在本页某区域显示要的内容
qq_45684708的博客
08-21 1582
案例 Html <!--左侧列表--> //on-select 事件会在文本框中的文本被选中时发生。 //active-name 默认选择的是 /user 即用户管理 <div active-name="/user" @on-select="selectMenu"> <div name="/user">用户管理</div> <div name="/qx">权限管理</div> </div> <!--主体区域conte
Vue路由
最新发布
m0_67496588的博客
07-24 508
Vue路由，管理系统页面
【Vue】跳转指定页面
weixin_44768683的博客
08-24 2665
vue跳转指定页面：根据图标打开新的页面，跳转到指定页面，之后在此页面隐藏该跳转图标
vue-router实现登录和跳转到指定页面，vue-router 传参
涛哥~梦
12-25 1061
http://www.cnblogs.com/coolslider/p/7074715.html
初识vue（10）—— vue-router 实现底部导航栏固定，组件切换
小R.的博客
02-19 3584
  在实际项目中，我们常会需要设置导航，特别是在移动端，基本都需要设置个固定的底部导航。比如下图所示这种，这时我们就可以通过 vue-router 实现底部导航栏固定，组件切换。 具体操作如下： 1. 配置路由 代码： /* 路由器对象模块 */ import Vue from 'vue' import VueRouter from 'vue-router' import MSite from '../pages/MSite/MSite.vue' import Search from '../page
Vue Router路由安装配置以及实现页面跳转
liuyalin_的博客
07-24 4376
一、Vue Router路由安装配置 （vscode中） 1.先安装 npm install vue-router或cnpm install vue-router或yarn add vue-router 因为我的在创建项目的时候yarn有点问题选择的包是npm 我用到的命令是 npm install --save vue-router 安装完之后去检查package.json是否安装上 2.安装完之后 就要在src根目录下新建router.js 路由管理 配置路由信息 如果在一个模块化工程中使用它
Vue 页面跳转不用router-link的实现代码
08-27
Vue 页面跳转不用 router-link 的...本文介绍了 Vue 页面跳转不用 router-link 的实现代码，包括使用 v-if 指令控制页面显示和隐藏、使用数据绑定控制页面显示和隐藏，以及使用 router-link 跳转传值示例实现页面跳转。
vue-router跳转时打开新页面的两种方法
10-16
下面，我们将详细探讨使用vue-router跳转到新页面的两种常用方法。 首先，要理解vue-router提供的跳转方式，我们可以使用<router-link>组件或者编程式导航。 第一种方法是通过<router-link>标签配合target="_blank...
Vue.js实战之利用vue-router实现跳转页面
10-20
然后，在项目的入口文件main.js中引入vue-router，并使用Vue.use()方法进行安装，最后实例化VueRouter并将配置好的路由对象传入Vue实例。 在配置路由时，每个路由由一个对象表示，对象中包含path（路径）、name...
Vue 路由的router 路由守卫 阻止路由跳转 让其跳到固定的位置
qq_60690665的博客
11-17 3202
Vue 路由的router 路由守卫 阻止路由跳转 让其跳到固定的位置
解决Vue页面固定滚动位置的处理办法
08-30
本篇文章主要介绍了解决Vue固定滚动位置的处理办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue教学20：掌握路由基础，使用Vue Router构建单页应用
工作内容分享
03-09 931
通过本博客的学习，我们了解了路由的基本概念，并学习了如何使用Vue Router构建单页应用。Vue Router是Vue.js官方的路由库，它提供了灵活的路由管理和页面导航功能，非常适合构建单页应用。我们通过创建一个简单的Vue Router应用，学习了如何在项目中使用Vue Router，以及如何通过Vue CLI来创建和运行一个Vue项目。掌握Vue Router的使用对于提高Vue.js应用的开发效率非常重要。它不仅可以帮助我们节省时间，还能确保我们的应用拥有良好的用户体验和导航能力。
Vue学习（六）——Vue-Router引入
sadoshi的专栏
01-12 8750
前言 Vue-Router是Vue官方推荐的使用的路由库。由于官方文档以单页面为主，而实际项目大多不是这样。所以这篇文章记录一下搭建一个简单Vue应用如何引入Vue-Router。 新建项目 安装依赖 我们还是按照之前《Vue学习（一）——组件基础》的方式初始化项目。 vue create router1 之后安装依赖 npm install 这之后我们进入项目的目录并安装Vue-Router。 cd route1 npm install vue-router --save
vue2项目所有页面固定格式相同，内容不同时，封装组件
weixin_69677630的博客
12-27 416
vue2项目所有页面固定格式，内容不同时，封装组件
Vue技能点--切换路由时保留页面状态
程序员大阳
01-28 9695
左侧是导航菜单，点击后可以打开多个页面，通过标签切换已打开的页面。 但是切换时，Vue路由默认地会重新加载每个路由页面，现在的需求就是想实现保留每个页面的状态，比如输入的文字，不在切换页面时丢失状态。
vue-router动态路由设置自定义首页
weixin_48494231的博客
01-09 4455
2.遇到问题点：因为首页是用户自定义的，所以在对后端请求来的数据除了需要使用递归处理成路 由的数组结构还要用自定义的首页ID查询出对应的首页路由，（我这里是记录了对应的name方 便后续跳转使用），最后在递归函数的末尾往动态路由再push一个路由规则，我这里写成。总结：使用了重定向以及静态路由和动态路由，之前一直想更改静态路由里面'/'的重定向，显然不合理，静态路由在初始化页面时就已经挂载好，后续更改时比较麻烦。redirect:{name:首页name}
vue quickstart
weixin_41783335的博客
12-11 233
创建工程 cnpm install -g vue-cli vue init webpack project cnpm install cnpm run dev axios //main.js import VueAxios from 'vue-axios'; import axios from 'axios'; Vue.use(VueAxios, axios); //demo1.vue <script> export default { name: "demo1", met
vue实现固定位置显示
热门推荐
一个还在路上的人……
09-03 1万+
在vue项目中实现吸顶效果. 比如说，我们要实现的功能是导航栏在页面下滑到一定位置之后，便固定不定。 首先：要在mounted生命周期内监听'scroll'事件，事件触发后，执行一个处理滚动的函数。 window.addEventListener('scroll', this.handleScroll) methods:{ handleScroll () { var scrol...
Vue.js实战：vue-router组件跳转与配置教程
在Vue.js项目中，当页面需要动态地跳转到其他组件时，传统的`<a>`标签的`href`属性并不适用，因为这会导致浏览器的URL变化但不会刷新页面，不符合单页应用（SPA）的交互体验。此时，Vue Router作为一种强大的工具，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值