vue路由 | 易学教程

从头开始学习vue-router

阅读更多关于从头开始学习vue-router

一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行 npm run build 时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的标签是不起作用的，你必须使用vue-router来进行管理。三、vue-router实现原理 SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时

从头开始学习vue-router

阅读更多关于从头开始学习vue-router

vue路由传参页面刷新参数丢失问题解决方案

阅读更多关于 vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下：方法一：params传参： this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { 　　//组件路径 path: '/admin', 　　//组件别名 name: 'admin', 　　//组件名 component: Admin, } 通过params传递参数，如果我们想获取id的参数值，我们可以通过this.$route.params.id这种方式来打印出来就可以得到了；（注意：获取参数的时候是$route，跳转和传参的时候是$router）方法二：路由属性配置传参： this.$router.push({ name:"/admin/${item.id}", }) //这个组件对应的路由配置 { 　　//组件路径 path: '/admin:id', 　　//组件别名 name: 'admin', 　　//组件名 component: Admin, } 通过路由属性配置传参我们可以用this.$route

Vue elementUI使用

阅读更多关于 Vue elementUI使用

文章目录表格中使用switch 侧边导航设置成路由表格中使用switch 侧边导航设置成路由来源： CSDN 作者：一个爬坑的Coder 链接： https://blog.csdn.net/qq_39583550/article/details/104631015

基于vue的路由权限管理

阅读更多关于基于vue的路由权限管理

前言（此项目基于vue-cli跟layuot布局，不过后台系统基本都是这么布局的吧）现有一个需求，要求把现有管理后台修改为可以根据不同用户呈现出不同的菜单栏（其实就是路由）就如下图思路 1：先定义基本路由，然后使用router.addRoutes()动态添加相关路由 2：将用户的路由信息存储到localStorage 3：使用router.matcher重置路由代码 router.js文件：定义基本路由，创建初始路由跟定义重置路由函数 import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); // 定义基本路由 export let routes = [ { path: '/login', name: 'login', component: () => import('@/views/Login.vue') }, { path: '*', name: 'notFound', component: () => import('@/views/404.vue') } ]; const createRouter = () => { return new Router({ routes: routes }); }; //创建路由 let router = createRouter(); /

Vue.js 路由

阅读更多关于 Vue.js 路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容 Vue.js 路由需要载入 vue-router 库安装，推荐使用淘宝镜像： cnpm install vue-router Vue.js + vue-router 可以很简单的实现单页应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> <div id="demo"> <h1>hello, cyy~</h1>  <router-link to="/about">about</router-link> <router-link to="/contact">contact</router-link> <hr>  <router-view></router

【Vue】匹配404错误

阅读更多关于【Vue】匹配404错误

在路由规则中， * 代表的是任意字符。所以只要在路由的最后添加一个 * 路由，那么以后没有匹配到的 url 都会被导入到这个视图中。示例代码如下： let UserProfile = {template:"<h1>个人中心：{{$route.params.userid}}</h1>"}; let NotFound = {template: "<h1>您找的页面已经到火星啦！</h1>"} var routes = [ {path: "/user/:userid",component: UserProfile}, {path: "*",component: NotFound}, ] 来源： CSDN 作者：交大彭于晏链接： https://blog.csdn.net/weixin_42191575/article/details/104626029

vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"} 解决方案

阅读更多关于 vue router 报错： Uncaught (in promise) NavigationDuplicate{_name: "NavigationDuplicated"} 解决方案

vue-router ≥3.0版本回调形式以及改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告（注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…）方案一：安装vue-router3.0以下版本：先卸载3.0以上版本然后再安装旧版本 npm install @vue-router2.8.0 -S 方案二：针对于路由跳转相同的地址添加catch捕获一下异常： this.$router.push('/location').catch(err => { console.log(err) }) 方案三：在main.js下注册一个全局函数即可（注：此处理方案只针对于vue-router 3.0以上版本哈！！！） import Router from 'vue-router' const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 注：官方vue-router ≥3.0新版本路由默认回调返回的都是promise，原先就版本的路由回调将废弃

Vue学习

阅读更多关于 Vue学习

前言使用vue框架有一段时间了，这里总结一下心得，主要为新人提供学习vue一些经验方法和项目中一些解决思路。文中谨代表个人观点，如有错误，欢迎指正。环境搭建假设你已经通读vue官方文档（文档都没读一遍（至少），那不建议动手撸码），在大致了解vue是什么东西，有什么用，核心概念之后我们就可以开始着手学习vue。首先搭建环境。学习vue，我的建议是通过官手脚手架起步。 >>>Installation $ npm install -g vue-cli >>Usage $ vue init <template-name> <project-name> >>>>Example: $ vue init webpack my-project 根据需要安装插件yes or no,一直回车，脚手架就生成了。接下来剖析脚手架结构。脚手架结构剖析再开始写项目之前，我们需要弄清什么地方写什么代码。 build文件夹 webpack配置文件。此处配置webpack规则。整个项目是通过webpack支持的。比如你要使用less，你需要在webapck规则里使用less。 src 文件夹撸码的地方～基本你所有的代码都在这一块完成。 assets文件夹存放web中引用的图片媒体资源。 components文件夹主要存放可复用组件，你可以在任意页面中复用这些组件。 router文件夹

后台管理系统项目--开始

阅读更多关于后台管理系统项目--开始

1、首先计划好完成每个模块的时间　　完成页面需要好久？--首先估计出完成页面布局和简单路由跳转所需要的时间，只有先把页面完成了才能去对接接口实现复杂逻辑。　　对接接口需要好久？--实现页面复杂的跳转逻辑判断如登录权限、接口数据的获取保存等操作。　　做测试需要好久？--最后的测试肯定是要的，最好每个单元都进行一次测试，即每个功能完成就测试一次，在最后测的时候才好走通。 2、正式开始项目　　vue-cli的安装：在一个文件夹里安装一次即可，之后在该文件夹下直接使用vue命令即可；　　webpack初始化：名称可以和已有的文件夹名一致，不会冲突（针对git的项目）；　　安装好需要的插件---vuex、iview、wangeditor（我用的是这个富文本编辑器）、tree-table-vue（树状表格）；　　路由的配置：不在router/index.js里写长串的路由配置，而是引入进来的，这样就要写路由导航守卫才能有效； //router/index.js文件 import router from './router'//router就是自定义的路由配置文件 const router = new Router({ routes, mode: 'history' }) router.beforeEach((to,from,next) => {//路由前置导航守卫，to下一个路由

订阅 vue路由