前端学习（2178）：vue-router得参数传递二

app.vue

<template><div id="app"><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><button @click="userClick">用户</button><button @click="proClick">档案</button><router-view></router-view></div>
</template><script>
export default {name: 'App',data(){return{userId:'geyao'}},methods:{userClick(){this.$router.push('/user/'+this.userId)},proClick(){this.$router.push({path:'/pro',query:{name:'geyao',age:18}})},}
}
</script><style></style>

Home.vue

<template>
<div>
<h2>
我是首页
</h2>
<p>我是首页内容</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">新闻</router-link>
<router-view></router-view>
</div>
</template><script>
export default{name:"Home"
}
</script><style scoped></style>

about.vue

<template>
<div>
<h2>
我是about
</h2>
<p>我是首页内容</p>
</div>
</template><script>
export default{name:"Home"
}
</script><style scoped></style>

User.vue

<template>
<div>
<h2>
我是user
</h2>
<p>我是首页内容</p>
<h2>{{userId}}</h2></div>
</template><script>
export default{name:"User",computed:{userId(){return this.$route.params.userId}}
}
</script><style scoped></style>

HelloWorld.vue

<template>
<div>
<h2>
我是about
</h2>
<p>我是首页内容</p>
<p>我是首页内容</p>
<p>我是首页内容</p>
<p>我是首页内容</p>
<ul>
<li>
1
</li>
</ul>
</div>
</template><script>
export default{name:"Home"
}
</script><style scoped></style>

index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'
import HomeNew from '../components/HelloWorld'
import HomeMessage from '../components/Hello'
Vue.use(VueRouter)const routes = [{path: '/',redirect: '/home'}, {path: '/home',component: Home,children: [{path: 'news',component: HomeNew},{path: 'message',component: HomeMessage},]},{path: '/about',component: About},{path: '/user/:userId',component: User},]//安装插件
const router = new VueRouter({//配置之间的关系routes,mode: 'history',linkActiveClass: 'active'
})export default router

Hello.vue

<template>
<div>
<h2>
我是about
</h2>
<p>我是首页内容</p>
</div>
</template><script>
export default{name:"Home"
}
</script><style scoped></style>

profile.vue

<template>
<div>
<h2>
我是pro
</h2>
<p>我是首页内容</p>
<p>{{$route.query.name}}</p>
<p>{{$route.query.age}}</p></div>
</template><script>
export default{name:"Home"
}
</script><style scoped></style>

运行结果

前端学习（2178）：vue-router得参数传递二相关推荐

vue.js基础学习（Vue Router安装与使用）
基础入门:vue.js Vue Router安装与使用 1.Vue Router安装在cmd窗口运行命令:npm install vue-router@4,安装Vue Router: 2. Vue ...
前端学习日志(Vue)
文章目录模板语法插值语法指令语法数据绑定 MVVM模型数据代理事件处理计算属性监视属性进行监听深度监视条件渲染列表渲染 1.基本列表列表过滤列表排序生命周期 Vue组件的 ...
前端学习：Vue.js基本使用
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue教程文档: https://cn.vuejs.org/v2/guide/ 定义实例: ne ...
前端学习之路---node.js（二）
知识点下一篇 vue(一) 网站开发模型 + 黑盒子.哑巴 + 写代码让它变得更智能 + 按照你设计好的套路供用户使 ...
Vue全家桶学习笔记:Vue Router篇
前言学完了一堆后端的知识之后呢,又去学了下git- 嘛,现在又回到了前端的学习前置内容:
前端学习之vue+element-ui电商项目（八）商品信息添加
文章目录 0. 准备工作 1.界面样式 1.1 界面布局 1.2 导航区视图 2.卡片视图区域 2.1 警示条 2.1.1 步骤条 3. 卡片视图的表单 3.1 tab 栏框架 3.1.2 tab 栏 ...
前端学习之vue的生命周期函数
一.什么是生命周期函数我想,对于生命周期,咱都不会陌生,所谓生命周期,就是一个过程,从开始到结束,顾名思义,就像生命一样,从诞生到消逝.而生命周期函数,就是在这个生命周期的不同阶段中会被调用的函数, ...
WEB前端学习（3）CSS复习二（复合选择器+元素显示模式+ 背景）
一 CSS 复合选择器总结:复合选择器 1. 后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔.当标签发生嵌套时,内 ...
前端学习之vue+element-ui电商项目（九）订单管理
文章目录 0. 准备工作 1.界面样式 1.1 界面布局 1.2 导航区 2.订单数据列表 2.1 界面样式 2.2 数据添加 2.3 方法实现 3.分页区 3.1 界面样式 3.2 数据添加 3.3 ...
前端学习（173）:格式化文本二
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...

前端学习（2178）：vue-router得参数传递二

前端学习（2178）：vue-router得参数传递二相关推荐

最新文章

热门文章