zoukankan      html  css  js  c++  java
  • Vue 路由

    路由 vue-router

    参数 name使用:

    路由配置:
    import Main from './views/Main'
    routes: [
        {
            path: '/main',
            name: 'main',  # 为该路由起名,通过name即可指定该路由
            component: Main
        }
    ] 
    视图使用:
    1):
    <router-link :to="{name: 'main'}">主页</router-link>

    2): this.$router.push({ name:'course-detail', });

    补充 : router-link与系统a标签的区别

    router-link:会被vue渲染成a标签,但是点击这样的a标签不能发生页面的转跳,只会出现组件的替换
    a:也可以完成同样的效果,但是会发生页面的转跳

    路由传参

    第一种:

    router.js

    routes: [
        // ...
        {
            path: '/course/:id/detail',
            name: 'course-detail',
            component: CourseDetail
        },
    ]

    注意:
    // path如果是通过to直接访问,路由必须完全对应
    // :id代表可以完成任意内容匹配,用变量id保存

    跳转.vue

    <template>
        <!-- 1.标签跳转 -->
        <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>
    </template>
    
    <script>
        // ...
        goDetail() {
            // 2.逻辑跳转
            this.$router.push(`/course/${this.course.id}/detail`);
        }
    </script>

    接收.vue

    created() {
        let id = this.$route.params.id;
    }

    第二种:

    router.js

    routes: [
        // ...
        {
            path: '/course/detail',
            name: 'course-detail',
            component: CourseDetail
        },
    ]

    跳转.vue

    <template>
        <!-- 1.标签跳转 -->
        <router-link :to="{
                name: 'course-detail',
                query: {id: course.id}
            }">{{ course.name }}</router-link>
    </template>
    
    <script>
        // ...
        goDetail() {
            // 2.逻辑跳转
            this.$router.push({
                name: 'course-detail',
                query: {
                    id: this.course.id
                }
            });
        }
    </script>

    接收.vue

    created() {
        let id = this.$route.query.id;
    }

    补充:

    方法 go

    methods: {
       goPage() {
         // 返回上两页
         this.$router.go(-2);
    
        // 前进一页
        this.$router.go(1);          
       }
     }

    跨组件传参的四种方式

    // 1) localStorage:永久存储数据

        this.cTitle && (localStorage.cTitle = this.cTitle);
    // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置)
    // 3) cookie:临时或永久存储数据(由过期时间决定)
    // 4) vuex的仓库(store.js):临时存储数据(刷新页面数据重置)

    vuex 方式:

    store.js

    export default new Vuex.Store({
        state: {
            cTitle:'课程页',
            hTitle:'主页'
        },
        mutations: {},
        actions: {}
    })

    SetTitle.vue

    <template>
        <div>
            <Nav></Nav>
            <p>
                修改课程页标题 <input type="text" v-model="cTitle">
                <button @click="changeCTitle">修改</button>
            </p>
            <p>
                修改主页标题 <input type="text" v-model="hTitle">
                <button @click="changeHTitle">修改</button>
            </p>
        </div>
    </template>
    
    <script>
        import Nav from '@/components/Nav'
    
        export default {
            name: "SetTitle",
            components: {
                Nav
            },
            data() {
                return {
                    cTitle: '',
                    hTitle: '',
                }
            },
            methods: {
                changeCTitle() {
                    this.$store.state.cTitle = this.cTitle;
              // this.$store.state.cTitle 就可以拿到vuex仓库中state内的值
              // store是vue实例的成员
    // this.$store.commit('setCTitle', this.cTitle); }, changeHTitle(){ this.hTitle && (localStorage.hTitle = this.hTitle); } } } </script> <style scoped> </style>

    总结:

     在任意组件中给仓库变量赋值

    this.$store.state.title = 'newTitle'
    this.$store.commit('setTitle', 'newTitle')

    在任意组件中取仓库变量的值

    console.log(this.$store.state.title)
  • 相关阅读:
    PHP的反射机制
    mysqlbinlog
    PHP调用java的class
    ecshop session机制
    memory_limit session.cache_expire ecshop初始化注释说明
    ecshop运行超过30秒超时的限制解决办法
    如果你想拥有事业,而非仅仅是工作
    扎克伯格谈”人际交往”趋势
    Magento架构分析,Magento MVC 设计分析
    推荐的PHP编码规范
  • 原文地址:https://www.cnblogs.com/waller/p/11656966.html
Copyright © 2011-2022 走看看