「Vue」路由
Vue-router
router-link active-class
类型: string
默认值: "router-link-active"
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
路由传参:
a.query方式
<router-link to='/login?id=10&name=zs' >登录</router-link>
var login = {template:'<h2>登录组件--{{this.$route.query.id}}</h2>'}
b.params方式 这种方式需要严格的按照path的规定方式传参
<router-link to='/reg/2/ss'>注册</router-link>
{path:'/reg/:id/:name', component: reg} :id是占位符
var reg = {template:'<h2>注册组件--{{$route.params.id}}</h2>'}
路由嵌套:children应用
routes:[
{path:'/cout',
component: cout,
children:[
{path:'login',component:login},
{path:'reg',component:reg},
]
},
],
<template id="cout">
<div>
<h2>主界面</h2>
<router-link to='/cout/login'>登录</router-link>
<router-link to='/cout/reg'>注册</router-link>
<router-view></router-view>
</div>
</template>
<router-link to='/cout' >主页</router-link>
<router-view></router-view>
路由命名视图:
「Vue」路由的更多相关文章
- Android逆向之旅---静态方式分析破解视频编辑应用「Vue」水印问题
一.故事背景 现在很多人都喜欢玩文艺,特别是我身边的UI们,拍照一分钟修图半小时.就是为了能够在朋友圈显得逼格高,不过的确是挺好看的,修图的软件太多了就不多说了,而且一般都没有水印啥的.相比较短视频有 ...
- 「Vue」起步 - vue-router路由与页面间导航
vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请 ...
- 「Vue」登陆-路由拦截器
1.main.js设置拦截器 router.beforeEach(function (to,from,next) { if (to.meta.requireAuth) { if (store.stat ...
- 「Vue」程序式路由导航用法
1.button发起点击请求<mt-button type='primary' size='large' plain @click="topdcmt(id)">商品评论 ...
- 「Vue」watch基本用法
应用于监视路由地址改变,如有新地址(即路由地址改变)即执行自定义方法 methods: { itemShow() { this.$axios.get('item/item/'+this.id+'?to ...
- 「Vue」父子组件之间的传值及调用方法
a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...
- 「Vue」vue生命周期
Vue的生命周期 beforeCreate---created---beforeMount---mounted---(beforeupdate---updated :数据有更新时才会执行)---bef ...
- 「Vue」自定义指令
#全局自定义指令1.使用Vue.directive()定义全局的指令 v-focus2.参数1 指令的名称,在定义的时候,指令的名称前面不需要加v-前缀3.但是在调用的时候必须在指令名称前 加上v-前 ...
- 「Vue」自定义按键修饰符
vue.config.keyCodes.f2 = 113 设置完成后就可以绑定f2的按键操作@keyup.f2="add" 自带的有enter esc delete 空格 上下左右 ...
随机推荐
- cocos2d-x学习记录6——自定义Button
cocos2d-x中封装CCMenuItem等相关按钮,但是有些时候需要自己封装按钮,这样能够更加灵活的实现对应功能. 自定义Button,需要重写OnEnter()和onExit()函数,并在对应函 ...
- Jmeter(十八)_Ubuntu部署jmeter与ant
Docker部署接口自动化持续集成环境第三步,容器化Jmeter与ant! 接上文:Docker_容器化jenkins 为了整合接口自动化的持续集成工具,我将jmeter与ant都部署在了Jenkin ...
- Js_图片切换左右点击
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- 2014.8.23 Research Meeting Report
Dear All: It was good talk yesterday. However, I want to emphasize that, finally it is the *work* an ...
- Jenkins 构建运行java程序
我们将在Jenkins建立执行一个简单的 HelloWorld 应用程序,构建和运行Java程序.打开网址:http://localhost:8080/jenkins 第1步- 转到Jenkins 仪 ...
- 学习笔记 | CDQ分治
目录 前言 啥是CDQ啊(它的基本思想) 例题 后记 参考博文 前言 博主太菜了 学习快一年的OI了 好像没有什么会的算法 更寒碜的是 学一样还不精一样TAT 如有什么错误请各位路过的大佬指出啊感谢! ...
- 11.11 Daily Scrum
Today's tasks Tomorrow's tasks 丁辛 餐厅列表事件处理 餐厅列表事件处理 李承晗 实现指定地点搜索 整合已经完成的部 ...
- Scrum Meeting NO.5
Scrum Meeting No.5 1.会议内容 暂时料理完了编译,可以写软工了.说多了都是泪T_T 2.任务清单 徐越 序号 近期的任务 进行中 已完成 1 修改url名.参数 √ 2 学习Jso ...
- 20135202闫佳歆--week1 计算机是如何工作的
计算机是如何工作的 这一周我学习了计算机工作的相关知识. 最基础的,就是冯诺依曼体系结构结构,它最核心的思想是存储程序计算机,要点是:数字计算机的数制采用二进制:计算机应该按照程序顺序执行. 除了思想 ...
- Daily Scrum - 11/30
Meeting Minutes 现在有以下一些问题需要解决: 1.保存用户背诵情况的文件输出出了一些问题. 2.UWP开发Debug不太方便啊.老刘说他来加一个Log模块. 3.用户数据的同步有点麻烦 ...