vue路由

安装完 Node.js 和 npm/cnpm 后。通过命令控制面板： 1，创建 webpack 模板的新项目：vue init webpack my-project 2，进入项目：cd my-project 3，安装依赖包：cnpm install + 回车 (淘宝镜像使用) / npm install (下载国外的npm才使用) 4，运行项目：npm run dev 5，知道 localhost:8080可以访问，再进行以下配置。 首先必须在url/pages/demo2/index.vue 创建 index.vue,如下index.vue代码： <template> <h3>我爱你</h3> </template> <script> export default{ data(){ return{ } }, beforeCreate(){ console.log("beforeCreate"); }, created(){ console.log('created'); }, beforeMount(){ console.log('beforeMount'); }, mounted(){ console.log('mounted'); }, beforeDestory(){ console.log('beforeDestory'); }, destoryed(){ console

【报错】 Uncaught Error: [vue-router] route config "component" for path: /home cannot be a string id. Use an actual component instead 运行时不报错，但是页面显示空白。打开控制台显示下图： . 【报错解析】 路径/home的[vue router]route config“component”不能是字符串id 请改用实际的组件 在以下代码中定位，可以看到是组件的错误component export default new Router({ routes: [ { path:'/', redirect:'/home' }, { path:'/home', component:'Home' }, { path:'/cart', component:'Cart' }, { path:'/profile', component:'Profile' } ] }) 发现 component:'Profile' 不能加引号 【解决方法】 去掉引号（component:Profile）后界面即可正常显示。 来源： https://www.cnblogs.com/catherine-m/p/11837504.html

vue路由传参分为两种情况： 一、query和params传参的区别： 1、query传参显示参数，params传参不显示参数，params相对于query来说较安全一点。 2、取值方法也有不同：query取值：this.$route.query.XXX || this.$route.params.xxx 3、query传值页面刷新数据还在，而params传值页面数据消失。 二、各自写法： query 组件写法(help.vue)： 方式一： 方式二： 接受写法（home.vue） 页面渲染（home.vue）: query参数赋值到data： params： 组件写法（about.vue）： 方式二： 路由写法： 接受写法： 页面渲染： 来源： https://www.cnblogs.com/byyoki/p/11834010.html

路由的基本使用 .router-link-active, .myactive { color: red; font-weight: 800; font-style: italic; font-size: 80px; text-decoration: underline; background-color: green; } .v-enter, .v-leave-to { opacity: 0; transform: translateX(140px); } .v-enter-active, .v-leave-active { transition: all 0.5s ease; } <div id="app"> <!-- <a href="#/login">登录</a> --> <!-- <a href="#/register">注册</a> --> <!-- router-link 默认渲染为一个a 标签 --> <router-link to="/login" tag="span">登录</router-link> <router-link to="/register">注册</router-link> <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 --> <!-- 所以：

vue全家桶 ： vue + vuex (状态管理) + vue-router (路由) + vue-resource +axios +elementui react全家桶 ： react + redux(状态管理) +react-router(路由) + axios + antd || antd-model vue全家桶 ： vue + vuex (状态管理) + vue-router (路由) + vue-resource +axios +elementui react全家桶 ： react + redux(状态管理) +react-router(路由) + axios + antd || antd-model 来源： https://www.cnblogs.com/aibabel/p/11827851.html

组件化 组件化是 vue 的核心思想，它能提高开发效率，方便 重复 使用，简化调试步骤， 提升整个项目的可维护性 ，便于多人协同开发 组件通信 父组件 => 子组件: 属性 props 特性 $attrs 引用 refs // childprops: { msg: String } // parent<HelloWorld msg="Welcome to Your Vue.js App"/> // child :并未在 props 中声明 foo <p> {{$attrs.foo}} </p> // parent<HelloWorld foo="foo"/> // parent<HelloWorld ref="hw"/> mounted() { this.$refs.hw.xx = 'xxx' } 子元素 $children // parentthis.$children[0].xx = 'xxx' 子元素不保证顺序 子组件 => 父组件:自定义事件 // child this.$emit('add', good) // parent <Cart @add = "cartAdd($event)" ></Cart> 兄弟组件:通过共同祖辈组件 通过共同的祖辈组件搭桥， $parent 或 $root 。 // brother1 this . $parent . $on ( 'foo'

新建vue项目的时候 你会发现有个文件夹叫 router 这个文件夹下你可以设置一个index.js但是需要引入的两个包 import Vue from 'vue' import Router from 'vue-router' 　　 来源： https://www.cnblogs.com/lei0913/p/11794775.html

文笔不好 直接上地址(本来想从头开始写开发文档的 但是 没文化 写的又臭又长 ) 项目地址 效果地址 后台管理肯定要是实现权限的控制, 权限控制方面使用的都是addRouter方法 , 但是 有两种情况 一种是前端控制路由, 一种是后端控制路由, 我们公司用的是后端返回路由, 但是这个项目是前端控制路由,原因是这个项目没有后端, 用的是mock.js模拟接口,然后这个项目才刚刚开始,正在不断完善内容, 如果你有什么奇怪的需求可以评论联系我, 我可以加到我的项目里面(我说我没有文化吧, 这一段话又臭又长) ps: 如果你是祖安人 , 离我远点别喷我 来源： https://www.cnblogs.com/ADong4031/p/11792613.html

在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 总体来讲vue里面提供了三大类钩子，两种函数 1、全局钩子 2、某个路由的钩子 3、组件内钩子 两种函数： 1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/ 2.Vue.afterEach(function(to,form))/*在跳转之后判断*/ 全局钩子函数 顾名思义，它是对全局有效的一个函数 1 2 3 4 5 6 router.beforeEach((to, from, next) => { let token = router.app.$storage.fetch("token"); let needAuth = to.matched.some(item => item.meta.login); if(!token && needAuth) return next({path: "/login"}); next(); }); beforeEach函数有三个参数： to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）

项目地址 vue-cli3-project 欢迎 star 原文地址 https://www.ccode.live/lentoo/list/9?from=art 1. 创建一个vue项目 相信大部分人都已经知道怎么创建项目的，可以跳过这一节，看下一节。 1.1 安装@vue/cli # 全局安装 vue-cli脚手架 npm install -g @vue/cli 等待安装完成后开始下一步 1.2 初始化项目 vue create vue-cli3-project 选择一个预设 可以选择默认预设，默认预设包含了 babel , eslint 我们选择更多功能 Manually select features 回车后来到选择插件 插件选择 这边选择了（Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查、Unit测试框架） 路由模式选择 是否使用 history 模式的路由 （Yes） 选择一个css预处理器 (Sass/SCSS) 选择一个eslint配置 这边选择 ESLint + Standard config ，个人比较喜欢这个代码规范 选择什么时候进行 eslint 校验 选择（Lint on save）保存是检查 如果你正在使用的vscode编辑器的话，可以配置eslint插件进行代码自动格式化 选择测试框架 （Mocha +