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 ...
随机推荐
- Explain 参数详解,重点部分已经全部完成,还有少数几个参数没不理解没标注。
Explain 参数详解,重点部分已经全部完成,还有少数几个参数没不理解没标注.http://naotu.baidu.com/file/cdb631355392e317e1d925dc2e48f592 ...
- Qt带参数的信号和槽
在Qt的开发过程中,信号带参数是很常见的,在使用带参数的信号槽时,有以下几点需要注意. 当信号和槽函数的参数数量相同时,它们的参数类型要完全一致. 信号和槽函数的声明: signals: void i ...
- C#基础知识之扩展方法
扩展方法需要满足的条件: 1.扩展方法必须定义在静态类里. 2.扩展方法必须是静态方法. 3.扩展方法的第一个参数以this修饰符为前缀. 4.扩展方法必须在使用它的类的扩展方法内,否则必须显示的us ...
- Delphi--长线程
{ 长线程, 开启:随应用程序启用而启动 关闭:岁应用程序关闭而结束 } unit uLongThread; interface uses Classes, ADODB, DB, ActiveX, S ...
- 运算符、流程控制(if、while)笔记
目录 算术运算符 比较运算符(返回一个bool值) 逻辑运算符(把多个条件同时叠加) 赋值运算符 身份运算符 位运算符 成员运算符 python运算优先级 流程控制:向一个方向变化 if判断 单分支结 ...
- unittest----常用属性详解(框架属性详解)
很久没有写关于测试的随笔了,最近有空学习.整理一下关于unittest框架的知识. unittest单元测试框架,不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行. unittest ...
- 解决使用脚手架构建项目缺失node_modules文件夹文件问题
昨晚,在教我前端交流群里面的朋友搭建vue开发环境和构建vue项目的时候发现我自己之前能正常构建vue项目的现在却不行了,排查之下发现 通过脚手架构建项目的时候项目缺失了node_modules文件夹 ...
- linux运维、架构之路-cobbler无人值守
一.cobbler介绍 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等 1.主要功能:①Cobbl ...
- CSS插入的四种方式
一.什么是CSS CSS(Cascading style sheets 层叠样式表),CSS可以用以为网页构建样式表,通过样式表来达到对网页进行美化的效果.所谓层叠可以将网页想象成一层层的结构,高层 ...
- USACO Overplanting ( 线段树扫描线 )
题意 : 在二维平面上给出 N 个矩形,问你所有矩形构成的图案的面积是多少(相互覆盖的地方只计算一次) 分析 : 求矩形面积并可以模拟来做,不过使用线段树来辅助做扫描线可以更高效地求解 扫描线顾名思 ...