VUE框架之路由层，仓库层

一：路由跳转

this.$router.push(‘/course‘);
this.$router.push({name: course});
this.$router.go(-1);
this.$router.go(1);
<router-link to="/course">课程页</router-link>
<router-link :to="{name: ‘course‘}">课程页</router-link>

<template>
    <div class="nav">
        <ul>
            <li :class="{active: currentPage === ‘/‘}">
                <router-link to="/">主页</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course‘}">
                <router-link to="/course">课程</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course_detail‘}">
<!--                路由跳转-->
                <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav"
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: black;
    }

    .nav li {
        float: left;
        font: normal 20px/60px ‘微软雅黑‘;
        padding: 0 30px;
    }

    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }

    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

component组件层

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav
        },
        data() {
            return {
                course_list
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
             gocourse_detail(){
            // this.$router.push({name:‘course_detail‘})
                    this.$router.push({name: ‘course_detail‘});
        }
        },

    }
</script>

<style scoped>

</style>

View页面层一

<template>
    <div class="">
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
    </div>
</template>

<script>

    import Nav from "../components/Nav";

    export default {
        name: ‘home‘,
        components: {
            Nav,

        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)  // 跳转到页面

                }
            },
            goBack() {
                this.$router.go(-1); // 返回上一页
                this.$router.go(-2);  // 返回上两页

                this.$router.go(1)  // 前进一页
            },
            gocourse_detail(){
                this.$router.push({name: ‘course_detail‘});  // 路由跳转
            }

        }
    }
</script>

View页面层二

二：路由传参

（1）方式一

<template>
    <div class="course-card">
        <h3 @click="goDetail">{{course.name}}</h3>
    </div>
</template>

<script>
    export default {
        name: "CourseCard",
        props: [‘course‘],
        methods:{
            goDetail(){
                this.$router.push({
                    name:‘course_detail‘,
                    query:{id:this.course.id},   // 页面刷新传参不会消失
                    params:{id:this.course.id}  //  页面刷新传参会消失
                })
            }
        }
    }
</script>

<style scoped>
    .course-card h3, .course-card a {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: coral;
        font: normal 20px/200px ‘STSong‘;
        float: left;
        text-align: center;
        cursor: pointer;
        display: block;
    }
</style>

小组件一

<template>
    <div class="nav">
        <ul>
            <li :class="{active: currentPage === ‘/‘}">
                <router-link to="/">主页</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course‘}">
                <router-link to="/course">课程</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course_detail‘}">
<!--                路由跳转-->
                <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data(){
            return{
                currentPage:‘‘
            }
        },
        created() {
            this.currentPage = this.$route.path
        }
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: black;
    }

    .nav li {
        float: left;
        font: normal 20px/60px ‘微软雅黑‘;
        padding: 0 30px;
    }

    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }

    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

小组件二

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程页</h2>
        <hr>
        <div>
            <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
        </div>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    import CourseCard from ‘@/components/CourseCard‘

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav,
            CourseCard
        },
        data() {
            return {
                course_list
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});
            }
        },

    }
</script>

<style scoped>

</style>

页面渲染一

<template>
    <div>
        <Nav></Nav>

        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>

        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程详情页</h2>
        <hr>
        <p> {{course.name}} </p>
        <p> {{course.info}}</p>
        <p> {{course.price}}</p>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘,
            price: 6.66,
            info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘,
            price: 3.66,
            info: ‘学习前端，忘掉所有痛苦！‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘,
            price: 5.22,
            info: ‘别做梦了！‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘,
            price: 80000,
            info: ‘就是他，错不了！‘
        },
    ];

    export default {
        name: "Course-detail",
        components: {
            Nav
        },
        data() {
            return {
                course: {},
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)
                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1);
            }
        },
        created() {

            let id = this.$route.query.id;  // 接受传参值
            // let id = this.$route.query.id;      // 接受传参值
            for (let courses of course_list) {  // 便利所有的值
                if (id == courses.id) {

                    this.course = courses;

                    break
                }
            }
        }
    }
</script>

<style scoped>

</style>

页面渲染二

<template>
    <div class="">
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>

        <button type="button" @click="goBack">页面前进返回</button>
        <h2>主页</h2>
        <hr>
    </div>
</template>

<script>

    import Nav from "../components/Nav";

    export default {
        name: ‘home‘,
        components: {
            Nav,

        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)  // 跳转到页面

                }
            },
            goBack() {
                this.$router.go(-1); // 返回上一页
                this.$router.go(-2);  // 返回上两页

                this.$router.go(1)  // 前进一页
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});  // 路由跳转
            }

        }
    }
</script>

页面渲染三

PS：

（1）query：传参的时候刷新页面传参数据不会消失

（2）params：传参的时候刷新页面数据会消失

（2）方式二

<template>
    <div class="nav">
        <ul>
            <li :class="{active: currentPage === ‘/‘}">
                <router-link to="/">主页</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course‘}">
                <router-link to="/course">课程</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course_detail‘}">
<!--                路由跳转-->
                <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data(){
            return{
                currentPage:‘‘
            }
        },
        created() {
            this.currentPage = this.$route.path
        }
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: black;
    }

    .nav li {
        float: left;
        font: normal 20px/60px ‘微软雅黑‘;
        padding: 0 30px;
    }

    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }

    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

小组件一

<template>
    <div class="course-card">
        <h3 @click="goDetail">{{course.name}}</h3>
    </div>
</template>

<script>
    export default {
        name: "CourseCard",
        props: [‘course‘],
        methods:{
            goDetail(){
                this.$router.push(
                    this.$router.push(`/course_detail/${this.course.id}`)  // 通过传参id 需要使用``这个双引号可以添加变量
                )
            }
        }
    }
</script>

<style scoped>
    .course-card h3, .course-card a {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: coral;
        font: normal 20px/200px ‘STSong‘;
        float: left;
        text-align: center;
        cursor: pointer;
        display: block;
    }
</style>

小组件二

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程页</h2>
        <hr>
        <div>
            <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
        </div>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    import CourseCard from ‘@/components/CourseCard‘

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav,
            CourseCard
        },
        data() {
            return {
                course_list
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});
            }
        },

    }
</script>

<style scoped>

</style>

页面层一

<template>
    <div>
        <Nav></Nav>

        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>

        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程详情页</h2>
        <hr>
        <p> {{course.name}} </p>
        <p> {{course.info}}</p>
        <p> {{course.price}}</p>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘,
            price: 6.66,
            info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘,
            price: 3.66,
            info: ‘学习前端，忘掉所有痛苦！‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘,
            price: 5.22,
            info: ‘别做梦了！‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘,
            price: 80000,
            info: ‘就是他，错不了！‘
        },
    ];

    export default {
        name: "Course-detail",
        components: {
            Nav
        },
        data() {
            return {
                course: {},
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)
                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1);
            }
        },
        created() {

            let id = this.$route.params.id;      // 接受传参值
            for (let courses of course_list) {  // 便利所有的值
                if (id == courses.id) {

                    this.course = courses;

                    break
                }
            }
        }
    }
</script>

<style scoped>

</style>

页面层二

<template>
    <div class="">
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>

        <button type="button" @click="goBack">页面前进返回</button>
        <h2>主页</h2>
        <hr>
    </div>
</template>

<script>

    import Nav from "../components/Nav";

    export default {
        name: ‘home‘,
        components: {
            Nav,

        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)  // 跳转到页面

                }
            },
            goBack() {
                this.$router.go(-1); // 返回上一页
                this.$router.go(-2);  // 返回上两页

                this.$router.go(1)  // 前进一页
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});  // 路由跳转
            }

        }
    }
</script>

页面层三

 {
      path: ‘/course_detail/:id‘,  // 类似于正则表达式
      name: ‘course_detail‘,
      component: course_detail
    },

路由层

PS：

（1）此种方式使用了正则表达式通过匹配正则传递的参数进行数据的筛选

三：VUE跨组件传参

（1）方式一：localstorage

    <template>
        <div class="course-card">
            <h3 @click="goDetail">{{course.name}}</h3>
        </div>
    </template>

    <script>
        export default {
            name: "CourseCard",
            props: [‘course‘],
            methods:{
                goDetail(){
                    this.$router.push(
                        {
                            name:‘course_detail‘,
                            query:{id:this.course.id}
                        }  // 通过传参id 需要使用``这个双引号可以添加变量
                    )
                }
            }
        }
    </script>

    <style scoped>
        .course-card h3, .course-card a {
            width: 200px;
            height: 200px;
            border-radius: 50%;
    background-color: coral;
            font: normal 20px/200px ‘STSong‘;
            float: left;
            text-align: center;
            cursor: pointer;
            display: block;
        }
    </style>

小组件一

<template>
    <div class="nav">
        <ul>
            <li :class="{active: currentPage === ‘/‘}">
                <router-link to="/">主页</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course‘}">
                <router-link to="/course">课程</router-link>
            </li>
            <li :class="{active: currentPage === ‘/course_detail‘}">
<!--                路由跳转-->
                <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data(){
            return{
                currentPage:‘‘
            }
        },
        created() {
            this.currentPage = this.$route.path
        }
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: black;
    }

    .nav li {
        float: left;
        font: normal 20px/60px ‘微软雅黑‘;
        padding: 0 30px;
    }

    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }

    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

小组件二

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>{{cTitle}}</h2>
        <hr>
        <div>
            <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
        </div>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    import CourseCard from ‘@/components/CourseCard‘

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav,
            CourseCard
        },
        data() {
            return {
                course_list,
                cTitle: ‘课程页‘
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});
            }
        },
        created() {
            localStorage.cTitle && (this.cTitle = localStorage.cTitle)
        }

    }
</script>

<style scoped>

</style>

页面层一

<template>
    <div>
        <Nav></Nav>

        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>

        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程详情页</h2>
        <p>
            主页:<input type="text" v-model="hTitle">
            <!--            点击修改主页的名称会发生改名-->
            <button @click="changehTitle">修改主页</button>
        </p>
        <p>
            课程页:<input type="text" v-model="cTitle">
            <!--            点击修改课程页的名称会发生改名-->
            <button @click="changecTitle"> 修改课程页</button>
        </p>
        <hr>
        <p> {{course.name}} </p>
        <p> {{course.info}}</p>
        <p> {{course.price}}</p>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘,
            price: 6.66,
            info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘,
            price: 3.66,
            info: ‘学习前端，忘掉所有痛苦！‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘,
            price: 5.22,
            info: ‘别做梦了！‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘,
            price: 80000,
            info: ‘就是他，错不了！‘
        },
    ];

    export default {
        name: "Course-detail",
        components: {
            Nav
        },
        data() {
            return {
                course: {},
                hTitle: ‘‘,
                cTitle: ‘‘,
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)
                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1);
            },
            changehTitle() {
                this.hTitle && (localStorage.hTitle = this.hTitle);     // 只有this.hTitle为真（也就是输入的有值） 后面的才会成立

            },
            changecTitle() {
                this.cTitle && (localStorage.cTitle = this.cTitle)        // 只有this.cTitle为真（也就是输入的有值） 后面的才会成立
            },

        },
        created() {

            let id = this.$route.query.id;      // 接受传参值
            for (let courses of course_list) {  // 便利所有的值
                if (id == courses.id) {

                    this.course = courses;

                    break
                }
            }
        }
    }
</script>

<style scoped>

</style>

页面层二

<template>
    <div class="">
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>

        <button type="button" @click="goBack">页面前进返回</button>
        <h2>{{hTitle}}</h2>
        <hr>
    </div>
</template>

<script>

    import Nav from "../components/Nav";

    export default {
        name: ‘home‘,
        components: {
            Nav,

        },
        data() {
            return {
                hTitle: ‘主页‘

            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)  // 跳转到页面

                }
            },
            goBack() {
                this.$router.go(-1); // 返回上一页
                this.$router.go(-2);  // 返回上两页

                this.$router.go(1)  // 前进一页
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});  // 路由跳转
            }

        },
        created() {
            localStorage.hTitle && (this.hTitle = localStorage.hTitle)  // 如果localStorage有值 则使用仓库的 没有值使用默认值
        }
    }
</script>

页面层三

PS:

　　（1）上述课程详情页更改了主页与课程页面的名称且刷新之后课程名称不会更改为原有的

　　（2）localstorage存储的是永久的数据

（2）方式二：VUE仓库（store.js）

（1）

<template>
    <div>
        <Nav></Nav>
        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>
        <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button>
        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>{{cTitle}}</h2>
        <hr>
        <div>
            <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
        </div>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    import CourseCard from ‘@/components/CourseCard‘

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘
        },
    ];

    export default {
        name: "course",
        components: {
            Nav,
            CourseCard
        },
        data() {
            return {
                course_list,
                cTitle: ‘课程页‘
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)

                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1)
            },
            gocourse_detail() {
                this.$router.push({name: ‘course_detail‘});
            }
        },
        created() {

                this.cTitle = this.$store.state.cTitle  // 获取仓库数据
        }

    }
</script>

<style scoped>

</style>

课程页

<template>
    <div>
        <Nav></Nav>

        <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button>

        <button type="button" @click="goPage(‘/‘)">跳转主页</button>
        <button type="button" @click="goBack">页面前进返回</button>
        <h2>课程详情页</h2>
        <p>
            主页:<input type="text" v-model="hTitle">
            <!--            点击修改主页的名称会发生改名-->
            <button @click="changehTitle">修改主页</button>
        </p>
        <p>
            课程页:<input type="text" v-model="cTitle">
            <!--            点击修改课程页的名称会发生改名-->
            <button @click="changecTitle"> 修改课程页</button>
        </p>
        <hr>
        <p> {{course.name}} </p>
        <p> {{course.info}}</p>
        <p> {{course.price}}</p>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    let course_list = [
        {
            id: 1,
            name: ‘Python入门到入土‘,
            price: 6.66,
            info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘
        },
        {
            id: 2,
            name: ‘前端放弃攻略‘,
            price: 3.66,
            info: ‘学习前端，忘掉所有痛苦！‘
        },
        {
            id: 3,
            name: ‘你最棒，他最强‘,
            price: 5.22,
            info: ‘别做梦了！‘
        },
        {
            id: 4,
            name: ‘基佬修炼法则‘,
            price: 80000,
            info: ‘就是他，错不了！‘
        },
    ];

    export default {
        name: "Course-detail",
        components: {
            Nav
        },
        data() {
            return {
                course: {},
                hTitle: ‘‘,
                cTitle: ‘‘,
            }
        },
        methods: {
            goPage(path) {
                let current_path = this.$route.path;
                if (current_path != path) {
                    this.$router.push(path)
                }
            },
            goBack() {
                this.$router.go(-1);
                this.$router.go(1);
            },
            changehTitle() {
                this.hTitle && (localStorage.hTitle = this.hTitle);     // 只有this.hTitle为真（也就是输入的有值） 后面的才会成立

            },
            changecTitle() {
                console.log(this.$store);  // 查看仓库数据存储在哪个目录下
                this.$store.state.cTitle = this.cTitle;  // 数据更改

            },

        },
        created() {

            let id = this.$route.query.id;      // 接受传参值
            for (let courses of course_list) {  // 便利所有的值
                if (id == courses.id) {

                    this.course = courses;

                    break
                }
            }
        }
    }
</script>

<style scoped>

</style>

课程详情页

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import cookies from ‘vue-cookies‘

Vue.use(Vuex);
Vue.use(cookies);
export default new Vuex.Store({
  state: {
      cTitle:‘课程页‘
  },
  mutations: {

  },
  actions: {

  }
})

store.js

PS:

　　（1）如上述课程详情页从仓库获取数据更改了课程页的名称

　　（2）刷新更改名称之后的页面页面名称又恢复之前的页面

　　（3）vue通过仓库存储的数据不会临时有效刷新就没了

（2）仓库插件

export default new Vuex.Store({
    state: {
        title: ‘默认值‘
    },
    mutations: {
        // mutations 为 state 中的属性提供setter方法
        // setter方法名随意，但是参数列表固定两个：state, newValue
        setTitle(state, newValue) {
            state.title = newValue;
        }
    },
    actions: {}
})

store.js

任意组件给变量赋值
this.$store.state.title = ‘newTitle‘
this.$store.commit(‘setTitle‘, ‘newTitle‘)

任意组件获取变量的值
console.log(this.$store.state.title)

---恢复内容结束---

原文地址：https://www.cnblogs.com/SR-Program/p/11667227.html

时间： 2024-10-09 03:35:45

VUE框架之路由层，仓库层的相关文章

前端Vue框架 04 路由：逻辑跳转、路由传参项目组件的数据局部化处理data(){ return{} } 组件的声明周期组件间通信各种第三方插件(vuex,axios,element-ui,(jq+bs))

项目初始化 """ 1)根组件:App.vue <template> <div id="app"> <router-view /> </div> </template> 2)路由配置:router/index.js const routes = [ { path: '/', name: 'Home', component: Home } ]; 3)组件:views和components文件夹 i)

从零开始编写自己的C#框架（18）——Web层后端权限模块——菜单管理

从本章开始,主要讲解的是页面中对框架相关功能的调用方法,比如列表页面(又分为有层次感列表和普通列表).编辑页面.多标签页面等,只要熟悉了这些函数的使用方法,那么开发起来就会很便捷了. 1.如图先创建菜单列表与编辑页面 MenuInfoList.aspx 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MenuInfoList.aspx.cs" Inherits=&quo

从零开始编写自己的C#框架（15）——Web层后端登陆功能

对于一个后端管理系统,最重要内容之一的就是登陆页了,无论是安全验证.用户在线记录.相关日志记录.单用户或多用户使用帐号控制等,都是在这个页面进行处理的. 1.在解决方案中创建一个Web项目,并将它设置为启动项 2.添加引用 3.添加WebManage文件夹与Login.aspx文件 4.添加登陆页面HTML代码 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx

从零开始编写自己的C#框架（19）——Web层后端权限模块

不知不觉本系统写了快三个月了,最近写页面的具体功能时感觉到有点吃力,很多地方如果张嘴来讲的话可以说得很细,很全面,可写成文字的话,就不太会写了,有些地方想讲得清晰的话,得用多几倍的文字+实例+变化中的图片才能表达得清楚,而写这些又太费时间了,近段时间又特忙,所以只能是尽力而为,希望大家自行研究,如果有什么地方不明白的,发发评论或邮件给我,我再重新详细讲解. 说回正题,对于页面访问权限以及每个按键的权限控制,很久以前用过好几种不同的方法,比如为每个控件分配名称或编码,然后在写代码时绑定这些值,又比

从零开始编写自己的C#框架（17）——Web层后端首页

后端首页是管理员登陆后进入的第一个页面,主要是显示当前登陆用户信息.在线人数.菜单树列表.相关功能按键和系统介绍.让管理员能更方便的找到息想要的内容. 根据不同系统的需要,首页会显示不同的内容,比如显示公司公告.公司新闻.内部短消息.个人事务.各种业务提醒......等各种内容,这些大家可以需要去进行呈现. 先上代码 Main.aspx 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu

[转]JAVA中Action层, Service层，modle层和 Dao层的功能区分

首先这是现在最基本的分层方式,结合了SSH架构.modle层就是对应的数据库表的实体类.Dao层是使用了Hibernate连接数据库.操作数据库(增删改查).Service层:引用对应的Dao数据库操作,在这里可以编写自己需要的代码(比如简单的判断).Action层:引用对应的Service层,在这里结合Struts的配置文件,跳转到指定的页面,当然也能接受页面传递的请求数据,也可以做些计算处理.以上的Hibernate,Struts,都需要注入到Spring的配置文件中,Spring把这些联系

Vue框架的使用。

使用VUE首先需要下载安装一些列的环境. 第一步: 安装Node.js 下载并安装:node-v8.9.0-x64.msi 第二步: 安装Vue脚手架: cmd以管理员身份执行 npm install vue-cli -g 或者安装淘宝版 cnpm install vue-cli -g vue -V 查看是否安装成功第三步: 创建项目: vue init webpack myProject (项目名字) 提示内容: 然后初始化: vue init webpack myProject 第四步

vue框架开发出现白屏的解决方法汇总

利用vue框架写一个简单的新闻客户端,修改了部分配置重启项目后发现又白屏的情况.特此做个简单的汇总. 1.npm run build打包页面空白发现页面head中引用的js和css文件是出现了路径错误,这里修改如下: 解决位置:config/index.js文件:把assetsPublicPath: '/'改为assetsPublicPath: './' 2. iOS的Safari下无法打开网页 webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下无法打开

怎么能学好Web前端开发如何快速掌握Vue框架

怎么能学好Web前端开发?如何快速掌握Vue框架?很多人看好Web前端的市场前景,因此纷纷选择学习入行前端行业?.很多学Web前端的小伙伴在进阶阶段都要学习Vue,因为它是目前企业常用的技术之一.下面给大家分享一个比较不错的Vue学习路线. Vue是一个用于构建Web用户界面的JavaScript框架,因此在开始使用Vue之前,你至少先要掌握JavaScript和Web开发的基础知识.具备一定基础后,你可以了解以下内容: Vue生命周期.在构建你的第一个Vue应用之前,你要了解如何在网页中去安装