vue路由 | 易学教程

vue打包后刷新页面报错：Unexpected token <

阅读更多关于 vue打包后刷新页面报错：Unexpected token

前言今天遇到了一个很怪的问题，在vue-cli+webpack的项目中，刷新特定页面后页面会变空白，报错为index.html文件中Unexpected token <。怪点一是开发环境没有问题，只有生产环境有问题，怪点二是只有一个页面有问题，其他页面完全正常正文报错截图：根据上面的情况和以往经验，应该在index.html页面及发生错误的页面定位问题，但均解决不了问题。最后找到此项目的路由处，经过多次测试，解决问题，也确定了问题原由，原来是：路由中path的值不可以小写m开头，否则就会报上面的错误。在此写下报错环境： vue版本：2.5.2 vue-router：3.0.1 webpack：3.6.0 生产环境（npm run build 已放入服务器）页面路由的path以/m开头本文原创，转载请注明出处： https://www.cnblogs.com/zhangdongya/p/11417550.html 来源： https://www.cnblogs.com/zhangdongya/p/11417550.html

vue路由传参并跳转页面

阅读更多关于 vue路由传参并跳转页面

在vue项目中参数的传递可以使用本地缓存或者Vuex，那么vue能不能像小程序一样路由传参呢，显然是可以的而且非常简单方式一：query传参 //传参 go(){ that.$router.push({ path:'/order',//跳转路径 name: 'Order',//跳转路径的name值，不写跳转后页面取不到参数 // 参数 query: { name: 'name', dataObj: {} } }) }, //跳转后页面取参 mounted(){ // 路由参数 let mm = this.$route.query//query包含传递的所有参数 }, But 浏览器地址栏中显示如下，所以如果参数保密，该方式慎用啦方式二：parms传参 //传参 go(){ this.$router.push({ path:'/order',//跳转路径 name: 'Order',//跳转路径的name值，不写跳转后页面取不到参数 // 参数 params: { name: 'name', dataObj: {} } }) }, //跳转后页面取参 mounted(){ // 路由参数 let mm = this.$route.params//parms包含传递的所有参数 }, 是的就是这么相似，但是传递的参数就不会显示在地址栏了

页面跳转（包括vue路由）

阅读更多关于页面跳转（包括vue路由）

1、JS实现页面跳转　　1.1 使用window.location的href属性跳转　　　　 window.location.href = 'http://www.baidu.com' ;此处window可以省略，href也可以省略。　　　　document.location ='http://baidu.com' 　　1.2 使用window的一些方法进行跳转；　　　　window.location.assign('http://www.baidu.com'); 　　　　window.location.replace('http://www.baidu.com'); 　　　　window.open('http://www.baidu.com', '_blank');　　此处_target属性(blank 或者self)可以用来决定页面是在当前页面打开还是在新的页面打开。可以通过控制参数，控制新页面打开的方式。　　　　window.navigate('http://www.baidu.com'); 　　1.3 利用html的一些标签进行跳转　　　　<a href="http://baidu.com" _target="blank"></a>; 　　　　此处_target属性可以用来决定页面是在当前页面打开还是在新的页面打开。　　　<meta http-equiv=

vue 路由传参

阅读更多关于 vue 路由传参

1，<router-link :to></router-link> 传参 :to="`/detail/${item.id}/${index}/${item.number}`" 同时，route.js路由也要有相关的配置， { path: '/detail/:id/:index/:type', name: 'detail', component: detail } 2，编程式导航传参： (1) this.$router.push({ path:`/newList/`, query:{ id:this.id } }) path 是路由配置项的路径，query就是需要传递的参数 (2) this.$router.push({ path: `/newList/${this.id}` }) 取参： this.$route.params，切记使用this.$route.query是取不到的来源： https://blog.csdn.net/qq_40319394/article/details/100084153

【Vue路由系统详述】

阅读更多关于【Vue路由系统详述】

目录路由命名路由参数路由参数的实现原理子路由子路由之append 动态绑定属性子路由之append升级版子路由之非append 路由重定向手动路由路由钩子在路径中去掉"#"号原文: http://blog.gqylpy.com/gqy/280 一切分离都是为了更好的结合，本文详细介绍了前后端架构分离之后，前端如何实现路由的控制，即Vue路由系统——VueRouter. VueRouter下载地址(默认最新版本)：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js @ * VueRouter实现原理：** ==根据锚点值的改变，修改组件内容.== 我们先来看看不使用VueRouter，自己实现路由的控制，如下代码： <body> <div id="app"></div> <script> let oDiv = document.getElementById('app'); window.onhashchange = function () { // vue-router的实现原理是根据锚值的改变来对页面进行切换 switch (location.hash) { case '#/login': oDiv.innerHTML=`<h1>我是登陆页面</h1>`; break; case '#/register'

SPA项目搭建及嵌套路由

阅读更多关于 SPA项目搭建及嵌套路由

Vue-cli: 什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 注1：xxx 为自己创建项目的名称注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境安装vue-cli 打开cmd 在node-v10.15.3-win-x64\node_global下执行以下命令： npm install -g vue-cli npm install -g webpack 安装成功后会出现以下文件： vue vue.cmd vue-init vue-init.cmd vue-list vue-list.cmd 查看是否安装成功： vue -V（注意这里是大写的“V”）使用脚手架vue-cli(2.X版)来构建项目 cmd: 切换目录： vue init webpack spa1 （项目名）注1：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001 切换回中文：chcp 936 这两条命令只在当前窗口生效，重启后恢复之前的编码。注2：“一问一答”模式 1.Project name：项目名，默认是输入时的那个名称spa1，直接回车 2.Project

Vue路由动态加载

阅读更多关于 Vue路由动态加载

首先新建vue工程，一般我们不会特殊处理路由，但当项目页面越来越多，路由配置也会越来越大，路由文件就会变得不好维护 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home' import Test1 from './test1.router.js' import Test2 from '@/components/children/Test2' import Test3 from '@/components/children/Test3' Vue.use(Router) export default new Router({ routes: [ { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld }, { path:'/', name:'Home', component:Home, children:[ { path:'/test2', name:'Test2', component:Test2, }, { path:'/test3', name:'Test3', component

《vue》实现动态显示与隐藏底部导航方法！

阅读更多关于《vue》实现动态显示与隐藏底部导航方法！

在日常项目中，总有几个页面是要用到底部导航的，总有那么些个页面，是不需要底部导航的，这里列举一下页面底部导航的显示与隐藏的两种方式：其实很简单，我们在路由里面带上参数，这个参数就用来区分那个页面显示那个页面不显示。在vue官网里面有提到一个路由元信息的玩意，感兴趣的朋友可以看看，这里我就不多说直接贴代码了。第一种在路由js中添加 meta meta: { footShow: true, // true显示，false隐藏 }, 第二步：在app.vue中获取路由传的参数我们在四个一级页面带上 navShow 字段，然后通过 $route.meta.navShow 获取到数据，再判断是否显示就可以。第二种，使用使用watch监听导航切换 router 路由的配置 { path: '/', name: 'home', redirect: '/home', // 默认路由添加class component: home, meta: { footShow: true, // true显示，false隐藏 }, }, 1.1在路由中添加 name="" 可以不添加，但在app.vue 中获取的值可以用path 判断 console.log（）打印的值为： 1.2 在 app.vue 中监听路由的变化 (打印结果在上一步) 来源： https://www.cnblogs

vue中添加新组件

阅读更多关于 vue中添加新组件

1、在views 中添加目标组件容器例如 User.vue 2、在路由router.js中 import User from './views/User.vue' 然后添加路由 { path:'/user', name:'user', component:User } 3、来到App.vue 添加<router-link to="/user">User</router-link> 来源： https://www.cnblogs.com/fan-1994716/p/11410242.html

VueMusic-1.首页-路由配置

阅读更多关于 VueMusic-1.首页-路由配置

1.结构配置： <template> <div class="index"> <ul> <li> <router-link to="/Home"> <img src="../assets/logo-ea5.png" alt=""></router-link> </li> <li><router-link to="/Artists">歌手</router-link></li> <li><router-link to="/Listcate">榜单</router-link></li> <li><router-link to="/Ucenter">我的</router-link></li> <li><router-link to="/Search">搜索</router-link></li> </ul> <router-view /> </div> </template> <script> </script> <style scoped> .index img { width: 26px; height: 26px; } .index ul { display: flex; height: 50px; line-height: 50px; background: #f9f9f9; } .index ul li { flex: 1; text-align: center; } .index

订阅 vue路由