Vue全家桶之vue-router

最新推荐文章于 2022-09-01 11:11:36 发布
最新推荐文章于 2022-09-01 11:11:36 发布
阅读量201 收藏
点赞数
分类专栏： 前端开发、vue 文章标签： vue javascript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Clearlove_8/article/details/104145048
版权

路由分为前端路由和后端路由，后端主要是通过识别请求路径，分发对应的资源，
而前端路由主要是针对SPA单页面应用的局部刷新。识别触发的事件，分发对应的渲染内容。
vue-router中的router-link就会默认被渲染为a标签，在其path中的路径上加上#采用hash链接的方式进行导航，从而渲染对应的组件。

下面是使用vue-router的基本步骤：

1.引入库文件
2.添加路由链接
3.添加路由占位
4.定义路由组件
5.创建路由实例对象并配置规则
6.将路由挂载到vue根实例中

关于动态路由匹配：

（1）使用$route.params.参数，不够灵活
3.png
（2）使用Prop传参，boolean类型这一种最简单常用
5.png
(3)使用prop传递静态参数
4.png
(5)动静参数结合
6.png

命名路由的导航

7.png

编程式导航

this.$router.push('')  
this.$router.go(-1)
CenterElse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
(精华2020年5月14日更新) vue实战篇 vue-router动态路由的实现权限控制
一点一滴
05-12 1万+
router.js import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import home from '../pages/home.vue'; import news from '../pages/news.vue'; var allRoutes = [{ path:'/login', name:'login', meta:{ title:'登陆'
【快应用】为什么调用router.clear()后，立即调用router.getLength()发现页面并未销毁
华为开发者联盟
12-09 292
调用router.clear()后，页面销毁需要一定的时间，建议使用setTimeout延迟1s后再调用router.getLength()，这样就可以获取最新的页面栈数量。调用router.clear()后，立即调用router.getLength()发现页面并未销毁。欲了解更多更全技术文章，欢迎访问。
Vue基础（八）——路由
pro1822的博客
09-01 534
Vue基础（八）——路由
vue-router的实现原理_你可能不清楚的 Vue Router用法
weixin_39995297的博客
11-24 197
Vue Router 简单易上手，能实现大部分的需求。但是，如果在项目里需要更细致的控制路由，以实现与其同步的效果，就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。路由元信息用途(1)验证用户身份，定义用户权限能访问的页面大部分项目，除了登录页、重置密码页、用户协议页以外，页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后端进行双重验证。(登录)验证身份方法：1...
【laravel】访问路由报错问题，执行 php artisan route:clear 删除路由缓存文件，以及DingoApi的路由写法
小乔流水仁家的博客
12-06 3267
前言： 路由缓存：路由缓存不会作用于基于闭包的路由。要使用路由缓存，必须将闭包路由转化为控制器路由。 1、如果你的应用完全基于控制器路由，可以使用 Laravel 的路由缓存，使用路由缓存将会极大降低注册所有应用路由所花费的时间开销，在某些案例中，路由注册速度甚至能提高100倍！想要生成路由缓存，只需执行 Artisan 命令 ： php artisan route:cache 2、运行完...
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 3592
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
Vue全家桶(vue-router+vuex)
06-21
其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之vue-router和vuex、基于权限控制实现...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
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+...
Vue全家桶实践（四）---vue-router
Creabine的博客
12-28 3554
最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。 相关博客： Vue全家桶实践（一）—vue-cli Vue全家桶实践（二）—iView Vue全家桶实践（三）—axios Vue全家桶实践（四）—vue-router Vue
vue全家桶 （router，vuex）
子非渔
03-13 250
<!-- --> <template> <div class=''></div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组
你可能不清楚的 Vue Router 深度用法（一）
weixin_34289454的博客
02-16 637
Vue Router 简单易上手，能实现大部分的需求。但是，如果在项目里需要更细致的控制路由，以实现与其同步的效果，就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。 路由元信息用途 （1）验证用户身份 大部分项目，除了登录页、重置密码页、用户协议页以外，页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后...
nginx配置vue前端代理
Clearlove_8的博客
04-21 6863
背景：做一个前后端分离的项目，使用vue-cli创建的前端项目，在前端配置跨域请求。 一、开发阶段 在vue.config.js中配置devserver的proxy进行代理请求配置，然后将所有请求改为/api开头的即可。但是这样配置只在开发阶段起作用。所以在nginx上部署的时候，需要再重新配置请求代理。 vue.config.js中代码配置如下： // 相当于webpack-dev-server...
npm install 连接不上github解决办法
Clearlove_8的博客
10-22 3698
1.https://github.com.ipaddress.com/ 用ipaddress查询dns服务器地址 2.在host文件里配置 xxx github.com 3.使用npm ，尽量不用cnpm
纯vue+ui项目与小程序、uni-app开发的异同
Clearlove_8的博客
08-06 1919
一、前言 有些人会问，不都是vue语法吗，有什么差异呢。我不是说的语法，我是说的使用方面。 最近三个月一直在做移动端的项目。使用微信小程序原生和uniapp框架做开发，对vue的一些原始语法有些生疏。现在来对他们的一些差别进行对比。 二、内容 1.纯vue项目使用比如Element-ui、Ant-design、vant等ui框架来渲染界面。而weixin和uniapp则有自带的ui组件(当然也可以使用其他ui框架，比如uView)。 2.纯vue项目需要使用vue-router及其导航首位来配置页面跳转。w
vue.nextTick和vue.set
Clearlove_8的博客
11-03 1490
一、vue.nextTick 1.场景一：在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。 在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。 2.场景二：在数据变化后要
element-ui使用常见问题
Clearlove_8的博客
02-01 900
1.最常见的问题：form表单的每一项的prop属性是为了提供表单验证，尽量填写，而且名字需要和每个表单项绑定的值的名字一致，否则表单验证validate方法和重置表单resetFields方法不起作用。 2.el-menu-item菜单组件的index属性是可以起router作用的，必须是字符串。el-submenu的Index的值如果相同，则同时展开关闭一级菜单项。 3.为防止默认激活（def...
vue2中怎么安装vue-router
最新发布
06-02
要在Vue2中安装Vue Router，您可以按照以下步骤进行操作： 1. 通过npm安装vue-router ``` npm install vue-router --save ``` 2. 在main.js文件中引入vue-router并使用 ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) const router = new VueRouter({ routes: [ // your routes here ] }) new Vue({ router, render: h => h(App), }).$mount('#app') ``` 3. 在需要使用路由的组件中定义路由 ```javascript <template> <div> <router-link to="/about">About</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'Home' } </script> ``` 以上就是在Vue2中安装和使用Vue Router的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值