vue路由

测试效果博客

由 无人久伴 提交于 2019-12-01 15:07:20
目录 本博客环境 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目（步骤小多） 启动 vue 项目（命令行方式） 启动 vue 项目（pycharm 方式） 配置 pycharm 启动 Vue 项目目录结构分析 pycharm 支持 vue 语法 安装 vue 插件 部分 vue 文件剖析 自定义组件并渲染到页面上 组件的导入与导出 全局脚本文件 main.js 解析（项目入口） vue 项目启动生命周期 加载 mian.js 启动项目 加载 router.js 文件 监测路由变化来做处理 参与文件 main.js 入口文件 App.vue 项目根组件 views/RedPage.vue 自定义页面组件 router.js 路由文件 全局样式文件配置与应用 小案例 - 封装 Nav 导航栏组件 components/Nav.vue 新建子组件 views/HomePage.vue 新建视图页面 新增页面三步骤 案例 组件生命周期（钩子函数剖析） ***** 基本概念 生命周期钩子函数 vue 官方提供的生命周期钩子函数 根据请求路径高亮路由标签案例 vue 官方提供的组件生命周期图 本博客环境 如果这些环境过时了，那就不用浪费时间看这博客了 Vue-Cli 项目环境搭建 npm (就类似于手机的应用商城，python 中的

vue路由定义

由 廉价感情. 提交于 2019-12-01 12:22:08
router 根据URL分配到对应的处理程序 单应用页面，vue开发中只有一个一面 例如我们在开发移动端的时候，正常情况下底部的tab有四个选项： 首页 home 发现 find 订单 order 我的 my 针对于四个页面，是有四个组件作支撑 比如说我们在components中建立一个文件夹，建立四个组件，组件中都是 template script style 三个层分别创建好 当我们建立四个页面之后，就要去分析页面，作为底部tab导航他其实在四个页面中都存在，是不需要改变的，但是作为内容中心层，每个页面都不一样，我们可以把底部导航写入一个组件。新建一个NavBottom.vue作为底部导航公用部分. NavBottom.vue 第一步：点击对面的进行页面跳转 路由中有两个属性，<router-link to="/home"> </router-link>,就相当于a链接,to就是跳转地址。 第二部：路由index.中配置，我们需要import引入，只需要在： important Home from "@/components/Home" important Find from "@/components/Find" important Order from "@/components/Order" important My from "@/components/My"

Vue-cli项目开发

由 浪尽此生 提交于 2019-12-01 10:35:59
目录 Vue-cli项目开发 环境 创建项目 pycharm运行Vue项目 项目目录介绍 main.js 组件 .vue 文件：模板(template) + 脚本(scpirt) + 样式(style) 前台路由的基本工作流程 配置全局样式文件 组件生命周期钩子 路由重定向 页面组件小组件综合案例：课程页 Vue-cli项目开发 环境 1）安装node：官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2）安装cnpm >:npm install -g cnpm --registry=https://registry.npm.taobao.org 3）安装脚手架 >:cnpm install -g @vue/cli 4）清空缓存处理(如果第2、3补出问题可以执行该条命令) >:npm cache clean --force 创建项目 >: cd 项目目录 >: vue create 项目名 #第一次出现的选项 default (babel, eslint) Manually select features #选择该项 #第二次出现 #空格勾选,回车下一步 (*) Babel #我们在VUe中一般都用ES6语法写的,这个插件功能很强大一般都选的把ES5语法解析成ES6 ( ) TypeScript #也是种语法js的升级版,脸书蛮推荐这个语法的

Vue路由的使用

由 徘徊边缘 提交于 2019-12-01 10:01:09
什么是路由 　　后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 　　前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现； 　　 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 必须先导入Vue --> <script src="./lib/vue-2.4.0.js"></script> <!-- 在导入router包 --> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app"> <!-- <a

vue-03

由 那年仲夏 提交于 2019-12-01 08:39:33
Vue项目环境搭建 """ node ~~ python：node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip：npm是一个终端应用商城，可以换国内源cnpm vue ~~ django：vue是用来搭建vue前端项目的 1) 安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli 注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤 npm cache clean --force """ Vue项目创建 1) 进入存放项目的目录 >: cd *** 2) 创建项目 >: vue create 项目名 3) 项目初始化 pycharm配置并启动vue项目 1) 用pycharm打开vue项目 2) 添加配置npm启动 vue项目目录结构分析 ├── v-proj | ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └── index.html

vue 路由跳转、传参和axios、cookie插件

由 血红的双手。 提交于 2019-12-01 08:29:05
一、路由 跳转方式 this.$router.push('/course');　　//根据标签 this.$router.push({name: course});　　//根据名字 this.$router.go(-1); this.$router.go(1); // 有历史记录跳转 <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> //类a标签，无需刷新跳转 课程页面： 　　components文件下建立小组件CourseCard； 　　在views文件的Course页面渲染CourseCard（导入注册，组件产传数据）； 课程详情页面跳转： 　　创建CourseDetail页面，rounter设置路由，在小组件内事件跳转页面（或绑定点击事件），跳转/course/detail/ 详情页的构建： 　　created函数内，通过for in遍历取值，获得； // for of 遍历的值 | for in 遍历的是取值的依据(arr是索引，obj是key) 二、传参三种方式 1）params（页面刷新就没有了，不保存，不建议使用） router.js routes: [ // ... { path: '/course/:id/detail'

解决vue项目路由出现message: \"Navigating to current location (XXX) is not allowed\"的问题

由 ≯℡__Kan透↙ 提交于 2019-12-01 07:57:41
原因：在路由中添加了相同的路由。 解决： 重写路由的push方法 在src/router/index.js 里面import Router from 'vue-router'下面写入下面方法即可 /** * 重写路由的push方法 */ const routerPush = Router.prototype.push Router.prototype.push = function push(location) { return routerPush.call(this, location).catch(error=> error) } 来源： https://www.cnblogs.com/lxk0301/p/11671256.html

8. Vue - Router

由 随声附和 提交于 2019-12-01 07:54:55
一、Vue Router 的使用 JavaScript: 1.创建组件：创建单页面应用需要渲染的组件 2.创建路由：创建VueRouter实例 3.映射路由：调用VueRouter实例的map方法 4.启动路由：调用VueRouter实例的start方法 HTML: 1.使用v-link指令 2.使用<router-view>标签 router.redirect: 1.应用在首次运行时右侧是一片空白，应用通常都会有一个首页，例如：Home页。 2.使用router.redirect方法将根路径重定向到/home路径： router.redirect({'/': '/home'}) router.redirect 方法用于为路由器定义全局的重定向规则，全局的重定向会 在匹配当前路径之前执行。 执行过程: 当用户点击v-link指令元素时，我们可以大致猜想一下这中间发生了什么事情： 1.vue-router首先会去查找v-link指令的路由映射 2.然后根据路由映射找到匹配的组件 3.最后将组件渲染到<router-view>标签 1. 引入Vue和Vue-Router插件 <script src="vue.js"></script> <script src="vue-router.js"></script> 2. HTML <div id="box"> </div> <!--定义模版

Vue之路由跳转 传参 aixos 和cookie

由 眉间皱痕 提交于 2019-12-01 07:42:09
　　一.路由跳转 　　1.1 项目的初始化 　　vue create m-proj >>>创建vue项目 　　精简vue项目的 　　views 视图 About(基本是删除的) Home.(可以作为主业去设置 搭建一些基本的样式) 　　scr 下创建一个css 作为全局的样式 设置 　　最后将设置好的全局样式 在mian.js 文件中 导入 作为 项目的入口 类似执行文件(start.py) 　　基础的完成了 　　 　　二.路由传参的几种方法 　　　　2.1 导航栏的显示设置 　　　　 <template> <div class="nav"> <ul><li :class="{active: currentPage==='/'}"> <!--<li @click="changePage('/')" :class="{active: currentPage==='/'}">--> <!--<a href="/" >主页</a>--> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage==='/course'}"> <!--<li @click="changePage('/')" :class="{active: currentPage==='/'}">--> <!--<a href="

七.web框架-----------VUE路由语法（七）

由 纵然是瞬间 提交于 2019-12-01 07:25:05
一 Vue路由 https://router.vuejs.org/zh/installation.html Vue Router https://cn.vuejs.org/v2/guide/routing.html 官方路由 对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。 https://www.runoob.com/vue2/vue-routing.html 菜鸟路由 来源： https://www.cnblogs.com/lovershowtime/p/11668596.html
订阅 vue路由