vue-router

vue-router使用简介

由 亡梦爱人 提交于 2019-11-28 01:16:33
vue-router使用简介 在我们的vue项目中不免会用到vue-router，那么我们具体应该怎么用呢？我们从几个简单的例子来讲，直接上代码： 1 // router.js 2 import Vue from 'vue' 3 import VueRouter from 'vue-router' 4 import Login from '@components/login' 5 import Register from '@component/register' 6 import Home from '@component/home' 7 import Info from '@component/info' 8 9 Vue.use(Router) 10 const exampleRouter = [ 11 { 12 path: '/login', 13 name: 'login', 14 component: { Login } 15 }, 16 { 17 path: '/register', 18 name: 'register', 19 component: { Register } 20 }, 21 { 22 path: '/home', 23 name: 'home', 24 component: { Home }, 25 children: [ 26 { 27 path

Vue.Router、query、params、$router、$route

由 夙愿已清 提交于 2019-11-28 00:01:29
1、query方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 2、params方式传参和接收参数 传参: this.$router.push({ name:'xxx' params:{ id:id } }) 接收参数: this.$route.params.id 注意与区别; params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！ 另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！ 3、this.$router和this.$route 的区别： 1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法 2.$route为当前router跳转对象，里面可以获取name、path、query、params等 来源： https://my.oschina.net/u

Vue实现移动端页面切换效果

由 时光毁灭记忆、已成空白 提交于 2019-11-27 23:39:04
找了好多博客实现效果都……emmm…… 应用Vue自带的过渡 《 进入/离开 & 列表过渡 》和 嵌套路由 和 fixed定位实现 其实还是挺简单的。 在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>Document</title> <style> * { padding: 0; margin: 0; } html, body, #app { width: 100%; height: 100%; } .one { height: 100%; background-color: yellow; } .two { background-color: tomato; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .three {

Vue-Router中History模式

由 放肆的年华 提交于 2019-11-27 22:09:03
目录 history路由 官方示例 Express中间件 客户端兜底404 示例代码托管在： http://www.github.com/dashnowords/blogs 博客园地址： 《大史住在大前端》原创博文目录 华为云社区地址： 【你要的前端打怪升级指南】 history路由 history 模式是指使用HTML5的 historyAPI 实现客户端路由的模式， 它的典型表现就是去除了 hash 模式中url路径中的 # 。对于前端路由基本原理还不了解的读者可以看这篇博文 【javascript基础修炼(6)——前端路由的基本原理】 。在使用 Vue-Router 时开启 history 模式非常容易，只需要在实例化路由时传入 mode:'history' 配置项即可，但缺少服务端支持时，基于 historyAPI 的路由无法从url地址栏直接访问指定页面，这个很容易理解，因为url地址栏里输入后回车相当于发送了一次 GET 请求，那么不带 # 的路由路径就和普通的 API 接口是一样的，既然服务端并没有定义这样的接口，那直接访问时出现404页面就很正常了。 官方示例 官方提供了很多处理这种场景的方式，以 node.js 版本的处理方案为例： const http = require('http') const fs = require('fs') const

Vue中路由管理器Vue Router使用方式（一）

由 耗尽温柔 提交于 2019-11-27 20:54:37
一、在模块编程中安装VueRouter 1.Npm安装vue-router npm install vue-router 2.在main.js中引用并使用VueRouter import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 3.定义路由，创建路由实例 /** * 定义路由,懒加载处理 */ const routes = [ { path: '/index', component: () => import('./components/Index.vue') }, { path: '/test', component: () => import('./components/Test1.vue') } ]; //创建路由实例 const router = new VueRouter({ routes }); 4.注册路由实例 //注册路由实例 new Vue({ router, render: h => h(App) }).$mount('#app') 二、Vue Router基础使用示例 1.App.vue 页面定义，使用router-link定义链接，使用router-view定义视图占位符 <template> <div id="app"> <el-row> <router

Vue中路由管理器Vue Router使用介绍（三）

由 拟墨画扇 提交于 2019-11-27 20:54:25
一、路由定义添加动态参数定义 1.路由定义项，使用:xx 方式 定义动态参数 { path:'/user/:id/:name', name:'user', component:()=>import('./views/User.vue') } 2.获取动态参数，全局变量 $route 在视图中使用： <template> <el-alert type='success' title="提示"> <el-button type='warn'>{{$route.params.id}}</el-button> {{$route.params.name}} <el-button type='primary' @click="backIndex()">返回首页</el-button> <router-link to='/'>返回首页</router-link> </el-alert> </template> 在js中使用： methods: { backIndex() { //打印参数 console.info(this.$route); } } 二、路由链接使用 1.使用router-link 定义跳转链接 <router-link to="/"> <el-button>跳转首页</el-button> </router-link> <router-link to="/about"> <el

Vue element 表格获取选中项操作

由 情到浓时终转凉″ 提交于 2019-11-27 20:54:12
一、在使用element table表格时，获取选中项处理 1.视图 <div> <el-button type="primary" @click="getSelected()">获取选中结果</el-button> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <

Vue element 二级菜单绑定示例

由 给你一囗甜甜゛ 提交于 2019-11-27 20:54:00
一、element ui 中动态绑定二级菜单示例 1.视图绑定 <!-- 两级菜单展示 --> <el-menu default-active="2" class="el-menu-vertical-demo" > <el-submenu v-for="item in menus" :key="item.ModelId" :index="item.ModelId+''"> <template slot="title"> <i class="el-icon-location"></i> <span>{{item.ModelName}}</span> </template> <el-menu-item-group> <el-menu-item v-for="subItem in item.Menu" :key="subItem.MenuID" :index="item.ModelId+'-'+subItem.MenuId+''" > <i class="el-icon-tickets"></i> <span>{{subItem.MenuName}}</span> </el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> 2.js export default { data() { return { count: 0,

vue配置环境参考

由 。_饼干妹妹 提交于 2019-11-27 20:35:43
转 https://www.cnblogs.com/tu-0718/p/7521099.html 转 https://www.jianshu.com/p/1626b8643676 $ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令 This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目 For Vue 1.x use: vue init webpack#1.0 exprice ? Project name (exprice) ---------------------项目名称 ? Project name exprice ? Project description (A Vue.js project) ---------------------项目描述 ? Project description A Vue.js project ? Author Datura --------------------- 项目创建者 ? Author Datura ? Vue build (Use arrow keys) ? Vue build standalone ? Install

vue cli3 搭建项目 使用vue-router 以及 element-ui

由 房东的猫 提交于 2019-11-27 20:21:38
搭建vue项目，（node和git 首先要下载） 1.首先根据vue官网 Cli的说明，快速搭建。 cli3上的命令应该是: vue create 项目名称（之后可以一路回车） npm run serve 将项目跑起来。 2.vscode打开项目，可以看到目录，首先在src下创建views文件夹，在里面继续创建两个文件夹， 分别是login和comment（个人习惯）,在这两个文件夹中新建文件，login.vue和home.vue(也是个人习惯)。 3.vue项目中使用了vue-router，所以请在控制台上下载，（命令是：npm i vue-router）,接着在src下 继续创建router文件夹，文件夹中创建文件，router_index,js用来写路由。具体的代码是： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import index from '../App.vue' import Login from '../views/login/login.vue' export default new Router({ routes:[{ path: '/', name: 'index', component: index, children:[{ path: '', name:
订阅 vue-router