Vue路由注意事项
一、vue中路由的使用
1、定义组件
<template>
<div class="hello">
<h1 @click="info" :class="color">{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '我是Hello组件',
color:'color'
}
},
methods:{
info(){
console.log('你点击了我');
}
}
}
</script>
<style>
.color{
color:#630;
}
</style>
2、配置路由文件
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Word from '@/components/Word';
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Hello
},
{
path:'/index',
component:Word
}
]
})
3、配置路由插座<router-view></router-view>
<template>
<div id="app">
<!--可以定义不变的内容-->
<h3>{{title}}</h3>
<!--定义路由插座-->
<router-view></router-view>
<!--可以定义不变的内容-->
</div>
</template>
<script>
export default{
name:'app',
data(){
return{
title:'我是项目主入口'
}
}
}
</script>
4、路由文件注入到main.js文件中
import Vue from 'vue';
import Router from 'vue-router';
import App from './App';
import router from './router/index';
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render(h){
return h(App);
}
})
二、配置路由的跳转
路由的跳转使用标签router-link
1、知道路径的跳转
<ul>
<li><router-link to="/">Hello页面</router-link></li>
<li><router-link to="/word">word页面</router-link></li>
</ul>
<!-- 定义路由插座 -->
<router-view></router-view>
2、to是通过绑定数据到上面
<ul>
<li><router-link to="/">Hello页面</router-link></li>
<li><router-link :to="word">word页面</router-link></li>
</ul>
<!-- 定义路由插座 -->
<router-view></router-view>
<script>
export default{
name:'app',
data(){
return{
title:'我是项目主入口',
word:'/word'
}
}
}
</script>
三、定义子路由
1、定义路由跳转
<ul>
<li><router-link to="/word/router1">路由1</router-link></li>
<li><router-link to="/word/router2">路由2</router-link></li>
<router-view></router-view>
</ul>
2、路由的跳转
{
path:'/word',
component:Word,
children:[
{
path:'router1',
component:Router1
},
{
path:'router2',
component:Router2
}
]
}
四、路由之间传递参数params方式
1、路由跳转的时候定义要传递参数形式
{
path:'router1/:id',
component:Router1
},
2、页面跳转的时候传递参数
<!--123就是传递的id值-->
<li><router-link to="/word/router1/123">路由1</router-link></li>
3、在组件中接收传递过去的参数
export default{
mounted(){
console.log(this.$route);
console.log(this.$route.params.id);
}
}
五、路由之间传递参数query方式
1、在路由跳转地方传递query参数
<li><router-link v-bind:to="{path:'/word/router2',query:{id:123}}">路由2</router-link></li>
2、在组件的mounted中接收
export default{
mounted(){
console.log(this.$route);
console.log(this.$route.query.id);
}
}
六、关于vue脚本中操作页面的跳转及传递参数
1、使用push实现页面跳转
methods:{
go1(){
// 使用params传递参数
this.$router.push({path:'/word/router1/123'});
}
}
2、使用replace实现页面的跳转
methods:{
go2(){
// 使用query传递参数
this.$router.replace({path:'/word/router2',query:{id:123}});
}
}
七、关于前进与后退
1、页面代码
<input type="button" value="前进" @click="next"/>
<input type="button" value="后进" @click="prevent"/>
2、事件方法代码
methods:{
next(){
this.$router.go(1);
},
prevent(){
this.$router.go(-1);
}
}
八、重定向
1、配置路由
{
path:'router', // path路径
redirect:'/word/router3' // 重定向指向的路径
}
2、配置页面跳转
<li><router-link to="/word/router">路由4</router-link></li>
3、重定向函数
{
path:'router5',
redirect:()=>{
console.log(arguments);
return '/word/router3';
}
}
九、路由的钩子函数
1、beforeEnter的使用
{
path:'router2',
component:Router2,
beforeEnter(to,form,next){
console.log('///',arguments);
setTimeout(()=>(next()),1000);
}
},
2、beforeRouteUpdate的使用
3、beforeRouteLeave的使用
十、路由实现组件间传递数据
1、直接传递到组件
<Myhead v-bind:name1="name1"></Myhead>
1
<script>
import Myheadfrom '@/components/Myhead';
export default{
name:'app',
data(){
return{
name1:'张三'
}
},
components:{
Myhead
}
}
</script>
2、组件Myhead中接收
export default{
props:['name1'],
}
3、传递到router-view上
<router-view v-bind:age="age"></router-view>
export default{
name:'word',
props:['age'],
}
Vue路由注意事项的更多相关文章
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- Vue路由参数
vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...
- vue项目注意事项
vue项目注意事项 1. 文件和路由命名规范 views里面代表的是你下面导航中的每一块,每个文件名 需要大写,路由命名全部小写,第一层路由就是最下面的那几个导航的名字,二级路由是在一 级路由的基础上 ...
- Vue路由-详细总结
Vue路由vue-router 前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
随机推荐
- 四、VLC搭建rtsp服务器
一.VLC搭建rtsp服务器 1.rtsp服务搭建 https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_Anima ...
- tflite
1.编译libtensorflow-lite.a库: ubuntu下交叉环境编译: https://blog.csdn.net/computerme/article/details/80345065 ...
- css3 transform中的matrix矩阵
CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...
- GUI学习之二十——QAbstractSlider学习总结
今天学习一种全新的输入控件——QAbstractSlider()滑块控件的基础控件. 一.描述: QAbstractSlider()是QWidget()的子类,提供了一个范围内的整数值.它是QSlid ...
- thinkphp5 yii2 laravel5.1 框架性能压测对比图
nginx+php7环境,opcache已经开启,每测试一个框架都重启服务器并且预热访问三次,压测工具ab.exe. laravel,thinkphp,yii都已关闭debug,该做的优化命令都搞了, ...
- 构建游戏开发的大数据项目的流程demo图
- 谷歌将用QUIC传输层技术加速互联网
安全这个话题,要感谢斯诺登,过去的安全就是攻和防之间的关系,即我们用一种什么样的体系.架构和模式去构建一个密不可破的安全系统.” 对IETF工作组忽视外部观察者看起来是一件甚么微不足道的事情的能力感到 ...
- HC-42蓝牙模块-nRF52832-数传蓝牙
资料下载地址:链接:https://pan.baidu.com/s/1RRajrI5NvNY8tRVuYbOTug 提取码:31ho 我的蓝牙模块淘宝购买地址:https://detail.tm ...
- Python---面向对象---案例
a = 5print(5/10)# 地板除(功能类似于数学模块当中floor()向下取整操作)print(5//10)print(a%10)b = 25print(b/10)print(b//10)p ...
- 10分钟学会React Context API
Create-react-app来学习这个功能: 注意下面代码红色的即可,非常简单. 在小项目里Context API完全可以替换掉react-redux. 修改app.js import React ...