zoukankan      html  css  js  c++  java
  • 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'],
    }
    

     

    http://www.beimohome.cn

  • 相关阅读:
    16进制与10进制
    npm模块管理器
    Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表
    cross-env使用笔记
    webpack 运行提示“The ‘mode‘ option has not been set”的原因和解决方法
    cnpm install -S 与cnpm install -D (dependencies和devDependencies的区别)
    Webpack基础学习
    webpack入门——webpack的安装与使用
    npm init 之package.json
    入门 Webpack,看这篇就够了
  • 原文地址:https://www.cnblogs.com/zjw2004112/p/11577292.html
Copyright © 2011-2022 走看看