vue路由

参考vue官方文档： https://router.vuejs.org/zh/guide/essentials/navigation.html // 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) methods: { gotodescribe(e,index){ this.$router.push({ // path: `/viewmessage/${this.names[index]}`, // 使用下列方法方法跳转路由，就不会出现点击tab后再次跳转的bug name: 'viewmessage', params: { name: this.names[index] } }) // alert(this.names[index]) // alert(index) } }, 来源： https://www.cnblogs.com/flypig666/p/11664603.html

Vue路由传参 方案一： 直接调用$router.push实现带参数的跳转 this.$route.push({ path:`/url/${id}` }) 方案一，需要对应路由配置如下： { path:'/url/:id' name:'name', component:Component } 在path中添加/:id来对应$router.push中path携带的参数。 子组件可以使用来获取传递的参数 this.$router.params.id 方案二： 父组件中：通过路由属性中的name来确定匹配的路由,通过params来传递参数。 this.$route.push({ path:'/url/', params:{ id:id } }) 对应路由配置：这里可以添加id也可以不添加，不添加数据在URL后面（显示/不显示） { path:'/url/:id' name:'name', component:Component } 子组件获取参数 this.$route.params.id 方案三： 父组件: 使用path来匹配路由，然后通过query来传递参数 这种情况下query传递的参数会显示在url后面？id =? this.$router.push({ path: '/url', query: { id: id } }) 对应路由配置： { path:'/url/:id'

1.先说路由分区 　　在router文件夹下新建你要分区的模块例如 登录 订单模块 　　新建文件 logn.router.js order.router.js 　　代码如下： export default { path: '/login', name: 'login', component: () => import('../views/login.vue'), children: [ ] } 　　order.router.js 也是如此 　　然后在 router.js中 引入 login.router.js、order.router.js 　　代码如下： import Vue from "vue"; import Router from "vue-router"; import Login from './routers/login.router.js'; import Order from './routers/order.router.js'; import Home from './views/home/home'; Vue.use(Router); export default new Router({ routes: [ { path: '/home', name: 'home', component: Home}, Login, Order ] }); 2.结合

---恢复内容开始--- 项目初始化 　　创建一个纯净的vue环境项目，手动书写全局的样式配置，全局的main,js配置 （1）如果vue项目在重构或者出错的时候 如果缺失node_modules节点模块，启动项目会如下报错： 再次安装刷新即可，系统会自动加载node-modules文件内容 接下来就是修改环境配置 全局的css 路由跳转 ---恢复内容结束--- 来源： https://www.cnblogs.com/Gaimo/p/11658287.html

路由 vue-router 参数 name使用: 路由配置: import Main from './views/Main' routes: [ { path: '/main', name: 'main', # 为该路由起名,通过name即可指定该路由 component: Main } ] 视图使用: 1): <router-link :to="{name: 'main'}">主页</router-link> 2): this.$router.push({ name:'course-detail', }); 补充 : router-link与系统a标签的区别 router-link：会被vue渲染成a标签，但是点击这样的a标签不能发生页面的转跳，只会出现组件的替换 a：也可以完成同样的效果，但是会发生页面的转跳 路由传参 第一种: router.js routes: [ // ... { path: '/course/:id/detail', name: 'course-detail', component: CourseDetail }, ]注意:// path如果是通过to直接访问，路由必须完全对应// :id代表可以完成任意内容匹配，用变量id保存 跳转.vue <template> <!-- 1.标签跳转 --> <router-link :to="`/course/$

复习 """ 1、vue项目环境： node => npm(cnpm) => vue/cli 2、vue项目创建： vue create 项目 在pycharm中配置npm项目启动 3、项目目录 4、main.js：程序的入口文件 加载vue环境 加载插件环境：路由、仓库、ajax、cookie、element-ui... 加载自定义环境：全局样式（global.css）、全局配置(settings.js) 渲染根组件 5、.vue文件形式组件： template标签：内部有且只有一个根标签 script标签：export default {}，导出该局部组件内容 style标签：scope属性，实现样式的组件化 6、项目运行的生命周期：main.js => router.js => 链接 => 页面组件 => 替换根组件中的 router-view 标签完成页面渲染 => 通过 router-link | this.$router.push() 切换路由(链接) => 完成渲染组件的替换 => 页面的跳转 7、新建页面的三步骤： 1）创建页面组件 2）设置组件路由 3）设置路由跳转 8、组件的生命周期钩子：组件从生成到销毁整个过程的一些特殊时间节点回调的函数 9、this.$router路由跳转 | this.$route路由数据 (this.$route.path) """

路由跳转 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> 路由传参 第一种 routes: [ // ... { path: '/course/:id/detail', name: 'course-detail', component: CourseDetail }, ] 跳转vue <template> <!-- 标签跳转 --> <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link> </template> <script> // ... goDetail() { // 逻辑跳转 this.$router.push(`/course/${this.course.id}/detail`); } </script> 接收vue

复习 """ 1、指令： v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show：绑定的变量为布尔类型 <p v-show="isShow">{{ msg }}</p>，隐藏时，任然在页面中通过display:none渲染 v-if|v-else-if|v-else: 前分支成立会屏蔽后分支，else分支不需要条件 v-if="showBox == 'rBox'" v-for：遍历 字符串: v-for="(ch, index) in str" 数组：v-for="(ele, index) in arr" 对象：v-for="(value, key, index) in obj" 2、实例成员： computed: 设置 方法属性，该方法属性在页面渲染后，绑定的方法中任意变量发送改变(都被监听)，都会回调绑定的方法 - 一个变量依赖多个变量 computed:{ fullName() { return this.firstName + this.lastName; } } watch: 设置已有属性的监听事件，监听的变量值改变就会回调绑定的方法 - 多个变量依赖一个变量 watch:{ fullName() { this.firstName = this.fullName.split('')[0]; this

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 // 标签图标 | | └──

原文链接： github.com 一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。 前言 该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。 准备 你需要先生成自己的 Github Personal Token（ 生成Token ）。 Token 生成后 访问 Demo ，即可查看你的Repository List。 项目结构 . ├── README.md ├── dist // 打包构建后的文件夹 │ ├── build.js │ └── build.js.map ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ ├── css.css │ │ ├── icon.css │ │ └── logo.png │ ├── constant │ │ └── api.js // 配置api接口文件 │ ├── http.js // 封装fetch、post请求及http 拦截器配置文件 │ ├── index.vue │ ├──