一、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'],
}

 

http://www.beimohome.cn

Vue路由注意事项的更多相关文章

  1. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  2. Vue路由参数

    vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...

  3. vue项目注意事项

    vue项目注意事项 1. 文件和路由命名规范 views里面代表的是你下面导航中的每一块,每个文件名 需要大写,路由命名全部小写,第一层路由就是最下面的那几个导航的名字,二级路由是在一 级路由的基础上 ...

  4. Vue路由-详细总结

    Vue路由vue-router   前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL ...

  5. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  6. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  7. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  8. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  9. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

随机推荐

  1. mingetty - 控制台最小的 getty

    总览 SYNOPSIS mingetty [--noclear] [--nonewline] [--noissue] [--nohangup] [--nohostname] [--long-hostn ...

  2. Crazy Search POJ - 1200 (字符串哈希hash)

    Many people like to solve hard puzzles some of which may lead them to madness. One such puzzle could ...

  3. hdu 1059 Dividing bitset 多重背包

    bitset做法 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a ...

  4. ocvate常用函数

    1.生成矩阵相关 https://www.coursera.org/learn/machine-learning/lecture/9fHfl/basic-operations 1. 初始化矩阵 a = ...

  5. evpp tcpclient

    重点函数讲解①:消息回调函数——void evpp::TCPClient::SetMessageCallback(const evpp::MessageCallback& cb) 注:设置消息 ...

  6. GUI学习之二十六——QColorDialog学习总结

    今天要讲的是QColorDialog对话框. 一.描述 QColorDialog对话框是用来为用户提供颜色选择的对话框控件,和上一章的QFontDialog控件一样,是继承自QDialog这个基类.其 ...

  7. docker常用命令及操作

    1).镜像操作 操作 命令 说明 检索 docker search 关 键 字 eg:docker search redis 我们经常去docker hub上检索镜像的详细信息,如镜像的TAG. 拉取 ...

  8. Django【第19篇】:Django之extra

    extra过滤 extra extra(select=None, where=None, params=None, tables=None, order_by=None, select_params= ...

  9. 【leetcode】1156. Swap For Longest Repeated Character Substring

    题目如下: Given a string text, we are allowed to swap two of the characters in the string. Find the leng ...

  10. PHP入门培训教程 一个漂亮的PHP验证码

    如何写一个漂亮的PHP验证码?兄弟连PHP培训 小编分享一段代码给大家: <?php class Imagecode{ private $width ; private $height; pri ...